@charset "utf-8";

/* ============================================================
   mmain21 — 도서관 시리즈 / 고서 백과사전형 히어로
   Book: W=340 H=460 D=68 (CSS 3D cuboid)
   ============================================================ */

body.page-light-header #header,
body.page-light-header #header.on,
body.page-light-header #header.act {
	background-color: #f0ebe2 !important;
}

/* ── 히어로 ── */
.lb-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 640px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #f0ebe2;
}

.lb-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 65% 60% at 30% 50%, rgba(200, 185, 155, 0.45) 0%, transparent 65%), radial-gradient(ellipse 50% 55% at 72% 45%, rgba(175, 155, 120, 0.3) 0%, transparent 60%), #f0ebe2;
}

/* ── 스케일 래퍼 (반응형) ── */
.lb-scene-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: margin-top 0.75s cubic-bezier(0.86, 0, 0.07, 1);
}

.lb-scene-wrap.is-open {
	margin-top: 28%;
}

@media (max-width: 999px) {
	.lb-scene-wrap.is-open {
		margin-top: 18%;
	}
}
@media (max-width: 768px) {
	.lb-scene-wrap.is-open {
		margin-top: 10%;
	}
}
@media (max-width: 499px) {
	.lb-scene-wrap.is-open {
		margin-top: 4%;
	}
}

/* ── Perspective 컨테이너 ── */
.lb-scene {
	perspective: 1100px;
	perspective-origin: 50% 50%;
}

/* ================================================================
   3D 책
   책 원점: .lb-book 요소의 좌상단 (CSS 기본)
   W=340, H=460, D=68
   - 앞표지(front): z축 기준 앞면, transform-origin: left center (열리는 방향)
   - 책등(spine): left:0, rotateY(-90deg), transform-origin: left center
   - 페이지엣지(pages): right:0, rotateY(90deg), transform-origin: right center
   - 상단엣지(top): top:0, rotateX(90deg), transform-origin: top center
   - 하단(bottom): bottom:0, rotateX(-90deg), transform-origin: bottom center
   ================================================================ */

.lb-book {
	position: relative;
	width: 340px;
	height: 460px;
	transform-style: preserve-3d;
	cursor: pointer;
	background: transparent;
}

/* ── 내지 (표지 안쪽, 열리면 보이는 종이) ── */
.lb-interior {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(transparent, transparent 27px, rgba(160, 130, 80, 0.18) 27px, rgba(160, 130, 80, 0.18) 28px), #f5edd8;
	transform: translateZ(-80px);
	border: 1px solid rgba(160, 130, 80, 0.2);
}

.lb-interior-line {
	position: absolute;
	left: 28px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(180, 100, 80, 0.25);
}

/* ── 책등 (좌측면) ── */
.lb-face--spine {
	position: absolute;
	width: 68px;
	height: 460px;
	left: 0;
	top: 0;
	transform-origin: left center;
	transform: rotateY(-90deg);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255, 255, 255, 0.02) 3px, rgba(255, 255, 255, 0.02) 4px), linear-gradient(to bottom, #162c1e, #1c3525 30%, #1c3525 70%, #162c1e);
	box-shadow:
		inset 4px 0 8px rgba(0, 0, 0, 0.3),
		inset -2px 0 4px rgba(201, 168, 76, 0.12);
}

.lb-spine-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 13px;
	font-family: "MaruBuri", serif;
	font-weight: 400;
	color: rgba(201, 168, 76, 0.75);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 420px;
}

/* ── 페이지 엣지 (우측면 — 책 두께 핵심) ── */
.lb-face--pages {
	position: absolute;
	width: 68px;
	height: 460px;
	right: 0;
	top: 0;
	transform-origin: right center;
	transform: rotateY(90deg);
	background: repeating-linear-gradient(to bottom, #f4e8cc 0px, #f4e8cc 1px, #ede0be 1px, #ede0be 2px, #f0e4c4 2px, #f0e4c4 3px, #e8d8b8 3px, #e8d8b8 4px);
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.12);
}

/* ── 상단 엣지 ── */
.lb-face--top {
	position: absolute;
	width: 340px;
	height: 68px;
	top: 0;
	left: 0;
	transform-origin: top center;
	transform: rotateX(90deg);
	background: repeating-linear-gradient(to right, #f2e6ca 0px, #f2e6ca 1px, #e8dcb8 1px, #e8dcb8 2px, #eee2c2 2px, #eee2c2 3px);
	box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.1);
}

/* ── 하단 (책 페이지 엣지 — 흰 책) ── */
.lb-face--bottom {
	position: absolute;
	width: 340px;
	height: 68px;
	bottom: 0;
	left: 0;
	transform-origin: bottom center;
	transform: rotateX(-90deg);
	background: repeating-linear-gradient(to right, #f4e8cc 0px, #f4e8cc 1px, #ede0be 1px, #ede0be 2px, #f0e4c4 2px, #f0e4c4 3px, #e8d8b8 3px, #e8d8b8 4px);
	box-shadow: inset 0 8px 12px rgba(0, 0, 0, 0.1);
}

/* ================================================================
   페이지 리프 — CodePen CSS Variable 방식
   --c: 현재 페이지 (.lb-book에 설정)
   --i: 각 리프 인덱스 (JS에서 설정)
   CSS가 clamp()로 회전각 자동 계산, JS는 --c만 증가
   ================================================================ */
.lb-leaf {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transform-style: preserve-3d;
	/* --c와 --i로 회전각 결정 */
	rotate: 0 1 0 calc(clamp(0, var(--c, 0) - var(--i, 0), 1) * -180deg);
	/* Z는 --center(고정값)로만 계산 — c가 바뀌어도 Z 안 움직임 → 우측 올라가는 현상 없음 */
	transform: translateZ(calc((var(--center, 0) - var(--i, 0) - 0.5) * 6px));
	transition:
		rotate 0.22s ease-in-out,
		transform 0.15s;
}

/* 리프 상단 엣지 — 리프가 뒤집힐 때 두께도 따라 이동 */
.lb-leaf-edge {
	position: absolute;
	width: 100%;
	height: 8px; /* 25장 × 6px Z간격 → 얇은 엣지가 촘촘히 쌓여 백과사전 두께 연출 */
	top: 0;
	left: 0;
	transform-origin: top center;
	transform: rotateX(90deg);
	background: repeating-linear-gradient(to right, #f4e8cc 0px, #f4e8cc 1px, #e8d9b2 1px, #e8d9b2 2px, #f0e2c0 2px, #f0e2c0 3px);
	pointer-events: none;
}

/* 커버 엣지 — 열렸을 때 페이지 더미와 동일 크림 */
.lb-leaf-edge--cover {
	background: repeating-linear-gradient(to right, #f4e8cc 0px, #f4e8cc 1px, #e8d9b2 1px, #e8d9b2 2px, #f0e2c0 2px, #f0e2c0 3px);
}

.lb-leaf--page {
	background: repeating-linear-gradient(transparent, transparent 27px, rgba(150, 120, 70, 0.15) 27px, rgba(150, 120, 70, 0.15) 28px), #f5edd8;
}

.lb-leaf--page[data-leaf="2"] { background-color: #f4ecd6; }
.lb-leaf--page[data-leaf="3"] { background-color: #f3ead4; }
.lb-leaf--page[data-leaf="4"] { background-color: #f2e8d2; }
.lb-leaf--page[data-leaf="5"] { background-color: #f1e7d0; }
.lb-leaf--page[data-leaf="6"] { background-color: #f0e5ce; }
.lb-leaf--page[data-leaf="7"],
.lb-leaf--page[data-leaf="8"],
.lb-leaf--page[data-leaf="9"] { background-color: #efe4cc; }
.lb-leaf--page[data-leaf="10"],
.lb-leaf--page[data-leaf="11"],
.lb-leaf--page[data-leaf="12"] { background-color: #ede1c8; }
.lb-leaf--page[data-leaf="13"],
.lb-leaf--page[data-leaf="14"],
.lb-leaf--page[data-leaf="15"],
.lb-leaf--page[data-leaf="16"] { background-color: #ebdfc6; }
.lb-leaf--page[data-leaf="17"],
.lb-leaf--page[data-leaf="18"],
.lb-leaf--page[data-leaf="19"],
.lb-leaf--page[data-leaf="20"] { background-color: #e9dcc3; }
.lb-leaf--page[data-leaf="21"],
.lb-leaf--page[data-leaf="22"],
.lb-leaf--page[data-leaf="23"],
.lb-leaf--page[data-leaf="24"],
.lb-leaf--page[data-leaf="25"] { background-color: #e7d9c0; }

/* ================================================================
   앞표지 — 고서/백과사전 디자인
   ================================================================ */
/* 표지 뒷면 (표지 안쪽) — 반대로 배치 */
.lb-cv-back {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(transparent, transparent 27px, rgba(150, 120, 70, 0.15) 27px, rgba(150, 120, 70, 0.15) 28px), #f5edd8;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: rotateY(180deg);
}

.lb-leaf--cover {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transform-style: preserve-3d;
	background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255, 255, 255, 0.015) 3px, rgba(255, 255, 255, 0.015) 4px), repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(255, 255, 255, 0.01) 5px, rgba(255, 255, 255, 0.01) 6px), linear-gradient(175deg, #223d2a 0%, #1c3525 45%, #162c1e 100%);
}

/* 이중 금박 프레임 */
.lb-leaf--cover .lb-cv-frame,
.lb-cv-frame {
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(201, 168, 76, 0.5);
	pointer-events: none;
}

.lb-cv-frame::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 0.5px solid rgba(201, 168, 76, 0.28);
}

/* 프레임 코너 장식 */
.lb-cv-frame::after {
	content: "";
	position: absolute;
	inset: -1px;
	background: radial-gradient(circle 3px at 0 0, rgba(201, 168, 76, 0.5) 0%, transparent 100%), radial-gradient(circle 3px at 100% 0, rgba(201, 168, 76, 0.5) 0%, transparent 100%), radial-gradient(circle 3px at 0 100%, rgba(201, 168, 76, 0.5) 0%, transparent 100%), radial-gradient(circle 3px at 100% 100%, rgba(201, 168, 76, 0.5) 0%, transparent 100%);
	pointer-events: none;
}

/* 표지 콘텐츠 */
.lb-cv-content {
	position: absolute;
	inset: 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
}

/* 장식 오너먼트 줄 */
.lb-cv-ornament {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 0;
}

.lb-cv-ornament::before,
.lb-cv-ornament::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.55));
}

.lb-cv-ornament--bottom::before,
.lb-cv-ornament--bottom::after {
	background: linear-gradient(to left, transparent, rgba(201, 168, 76, 0.55));
}

.lb-cv-diamond {
	font-size: 10px;
	color: rgba(201, 168, 76, 0.7);
	padding: 0 6px;
	flex-shrink: 0;
}

/* 시리즈 레이블 */
.lb-cv-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 300;
	color: rgba(201, 168, 76, 0.6);
	font-variant-numeric: oldstyle-nums;
}

/* 금박 제목 */
.lb-cv-tit {
	font-size: clamp(28px, calc(16px + 2.8vw), 52px);
	font-family: "MaruBuri", serif;
	font-weight: 700;
	background: linear-gradient(160deg, #9a7b3a 0%, #c9a84c 20%, #f0d080 40%, #fce68a 50%, #f0d080 60%, #c9a84c 80%, #9a7b3a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	word-break: keep-all;
}

/* 부제 */
.lb-cv-sub {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-family: "MaruBuri", serif;
	font-weight: 400;
	color: rgba(220, 200, 160, 0.65);
}

/* 연도 */
.lb-cv-year {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 300;
	color: rgba(201, 168, 76, 0.4);
	margin-top: 4px;
}

/* ── 파티클 ── */
.lb-particles {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
}

.lb-particles span {
	position: absolute;
	width: 1.5px;
	height: clamp(14px, 2vw, 22px);
	background: linear-gradient(to top, rgba(160, 130, 60, 0.9), rgba(220, 190, 100, 0.4) 70%, transparent);
	border-radius: 1px;
	transform-origin: bottom center;
	opacity: 0;
}

/* ── 기사 카드 ── */
.lb-cards-wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 920px;
	height: 0;
	pointer-events: none;
}

.lb-card {
	position: absolute;
	width: 210px;
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
	box-shadow:
		0 12px 36px rgba(0, 0, 0, 0.18),
		0 3px 10px rgba(0, 0, 0, 0.1);
	opacity: 0;
}

.lb-card:nth-child(1) {
	left: 0px;
	top: -45px;
}
.lb-card:nth-child(2) {
	left: 240px;
	top: -80px;
}
.lb-card:nth-child(3) {
	left: 480px;
	top: -80px;
}
.lb-card:nth-child(4) {
	left: 710px;
	top: -45px;
}

.lb-card-img {
	width: 100%;
	height: 140px;
	overflow: hidden;
}

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

.lb-card-body {
	padding: 11px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lb-card-cat {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 600;
	color: #7a5c2a;
}

.lb-card-tit {
	font-size: clamp(14px, calc(10px + 0.9vw), 20px);
	font-family: "MaruBuri", serif;
	font-weight: 600;
	color: #1c2e14;
	word-break: keep-all;
}

/* ================================================================
   섹션 2 — 책상 위 장면  (책: 240×340px, 씬: 1100×520px)
   ================================================================ */
.dk-sec {
	position: relative;
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* 나뭇결 책상 배경 */
	background: repeating-linear-gradient(88deg, transparent 0px, transparent 80px, rgba(0, 0, 0, 0.025) 80px, rgba(0, 0, 0, 0.025) 83px), repeating-linear-gradient(0deg, transparent 0px, transparent 10px, rgba(0, 0, 0, 0.015) 10px, rgba(0, 0, 0, 0.015) 11px), linear-gradient(165deg, #c8a87a 0%, #b8925a 35%, #c4a070 65%, #b08850 100%);
}

.dk-inner {
	width: 100%;
	max-width: 1200px;
	padding: 100px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

/* ── 섹션 헤드 ── */
.dk-head {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.dk-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 300;
	color: rgba(255, 248, 235, 0.7);
}

.dk-tit {
	font-size: clamp(20px, calc(14px + 1.2vw), 32px);
	font-family: "MaruBuri", serif;
	font-weight: 700;
	color: #fff8eb;
}

.dk-desc {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-family: "MaruBuri", serif;
	font-weight: 400;
	color: rgba(255, 248, 235, 0.55);
}

/* ── 책 배치 씬 ── */
.dk-scene {
	position: relative;
	width: 1100px;
	height: 520px;
	transform-origin: top center;
}

/* ── 책 공통 ── */
.dk-bk {
	position: absolute;
	filter: drop-shadow(20px 24px 36px rgba(50, 28, 8, 0.5));
	cursor: pointer;
}

.dk-bk-body {
	display: flex;
}

/* 책등 */
.dk-bk-spine {
	width: 24px;
	height: 340px;
	background: linear-gradient(to right, #111f16, #162c1e);
	flex-shrink: 0;
}

.dk-bk-spine--burg {
	background: linear-gradient(to right, #3a0f1e, #4a1525);
}
.dk-bk-spine--navy {
	background: linear-gradient(to right, #0c1220, #111a30);
}

/* 책 앞면 */
.dk-bk-face {
	width: 240px;
	height: 340px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px 24px;
	gap: 10px;
	position: relative;
	overflow: hidden;
}

.dk-bk-face--green {
	background: linear-gradient(160deg, #223d2a, #1c3525 55%, #162c1e);
}
.dk-bk-face--burg {
	background: linear-gradient(160deg, #5c1d30, #6b2737 55%, #4a1525);
}
.dk-bk-face--navy {
	background: linear-gradient(160deg, #1a2545, #1f2e55 55%, #111a30);
}

/* 금박 이중 테두리 */
.dk-bk-face::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(201, 168, 76, 0.4);
	pointer-events: none;
}

.dk-bk-face::after {
	content: "";
	position: absolute;
	inset: 18px;
	border: 0.5px solid rgba(201, 168, 76, 0.2);
	pointer-events: none;
}

/* 페이지 엣지 */
.dk-bk-edge {
	width: 14px;
	height: 340px;
	background: repeating-linear-gradient(to bottom, #f4e8cc 0px, #f4e8cc 1px, #e8d8b2 1px, #e8d8b2 2px);
	flex-shrink: 0;
}

.dk-bk-cat {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 300;
	color: rgba(201, 168, 76, 0.65);
}

.dk-bk-tit {
	font-size: clamp(20px, calc(14px + 1vw), 28px);
	font-family: "MaruBuri", serif;
	font-weight: 700;
	color: #f5f0e8;
}

/* ── 책 위치 (씬 1100px 기준) ── */
.dk-bk--1 {
	left: 40px;
	top: 90px;
	transform: rotate(-11deg);
}
.dk-bk--2 {
	left: 400px;
	top: 50px;
	transform: rotate(4deg);
}
.dk-bk--3 {
	left: 760px;
	top: 100px;
	transform: rotate(-8deg);
}

/* ── 포스트잇 ── */
.dk-sticky {
	position: absolute;
	width: 150px;
	padding: 14px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.2);
}

.dk-sticky--1 {
	background: #fef9c3;
	top: -70px;
	left: 50px;
}
.dk-sticky--2 {
	background: #fce7f3;
	top: -68px;
	left: 40px;
}
.dk-sticky--3 {
	background: #dbeafe;
	top: -72px;
	left: 46px;
}

.dk-sticky::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 36px;
	height: 7px;
	background: rgba(0, 0, 0, 0.07);
}

.dk-sticky-txt {
	font-size: clamp(12px, calc(9px + 0.5vw), 15px);
	font-family: "MaruBuri", serif;
	font-style: italic;
	color: #2c2417;
}

.dk-swipe-hint {
	display: none;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 300;
	color: rgba(255, 248, 235, 0.5);
	text-align: center;
}

.dk-sticky-sig {
	font-size: clamp(11px, calc(8px + 0.4vw), 13px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 300;
	color: rgba(44, 36, 23, 0.45);
	text-align: right;
}

/* ── 반응형 — dk-scene scale + 높이 보상 ── */
@media (max-width: 1199px) {
	.dk-scene {
		transform: scale(0.88);
	}
	.dk-sec {
		padding-bottom: calc(520px * 0.12);
	}
}

@media (max-width: 999px) {
	.dk-scene {
		transform: scale(0.72);
	}
	.dk-sec {
		padding-bottom: calc(520px * 0.28);
	}
	.dk-inner {
		gap: 40px;
	}
}

@media (max-width: 768px) {
	.dk-scene {
		transform: scale(0.62);
	}
	.dk-sec {
		padding-bottom: calc(520px * 0.38);
	}
	.dk-inner {
		padding: 60px 20px;
		gap: 30px;
	}
}

/* 699px 이하 — 가로 드래그 캐러셀 */
@media (max-width: 699px) {
	.dk-sec {
		padding-bottom: 0;
		overflow: hidden;
	}
	.dk-inner {
		padding: 60px 0;
		gap: 20px;
	}

	.dk-scene {
		width: 100%;
		height: auto;
		transform: none;
		display: flex !important;
		flex-direction: row;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 80px calc(50vw - 120px) 60px;
		gap: 40px;
		box-sizing: border-box;
		cursor: grab;
		user-select: none;
	}

	.dk-scene::-webkit-scrollbar {
		display: none;
	}
	.dk-scene.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
	}

	.dk-bk {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		flex: 0 0 auto !important;
		scroll-snap-align: center;
	}

	.dk-bk--1 {
		transform: rotate(-5deg);
	}
	.dk-bk--2 {
		transform: rotate(3deg);
	}
	.dk-bk--3 {
		display: block !important;
		transform: rotate(-4deg);
	}

	.dk-bk-face {
		width: 200px;
		height: 290px;
	}
	.dk-bk-spine {
		height: 290px;
	}
	.dk-bk-edge {
		height: 290px;
	}

	.dk-sticky--1 {
		top: -64px;
		left: 36px;
	}
	.dk-sticky--2 {
		top: -64px;
		left: 28px;
	}
	.dk-sticky--3 {
		top: -64px;
		left: 32px;
	}

	.dk-swipe-hint {
		display: block;
	}
}

@media (max-width: 499px) {
	.dk-bk-face {
		width: 168px;
		height: 248px;
		padding: 20px 16px;
	}
	.dk-bk-spine {
		height: 248px;
		width: 18px;
	}
	.dk-bk-edge {
		height: 248px;
		width: 10px;
	}
	.dk-scene {
		padding-left: calc(50vw - 100px);
		padding-right: calc(50vw - 100px);
	}
}

/* ================================================================
   섹션 3 — 목차형 기사 리스트 (호버 이미지 커서 팔로우)
   ================================================================ */
.toc-sec {
	position: relative;
	width: 100%;
	background: #f0ebe2;
	padding: 72px 40px;
	overflow: hidden;
	cursor: none;
}

.toc-inner {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.toc-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.toc-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 300;
	color: rgba(60, 45, 20, 0.5);
}

.toc-tit {
	font-size: clamp(20px, calc(14px + 1.2vw), 32px);
	font-family: "MaruBuri", serif;
	font-weight: 700;
	color: #1c2412;
}

.toc-list {
	list-style: none;
	display: flex;
	flex-direction: column;
}

.toc-item {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 24px;
	padding: 20px 0;
	border-top: 1px solid rgba(60, 45, 20, 0.12);
	cursor: none;
	transition: opacity 0.25s;
}

.toc-item:last-child {
	border-bottom: 1px solid rgba(60, 45, 20, 0.12);
}

.toc-item.is-dim {
	opacity: 0.35;
}

.toc-num {
	font-size: clamp(18px, calc(12px + 0.8vw), 22px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 300;
	color: rgba(60, 45, 20, 0.3);
}

.toc-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.toc-cat {
	font-size: clamp(14px, calc(10px + 0.6vw), 18px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 400;
	color: #7a5c2a;
	transition: color 0.2s;
}

.toc-name {
	font-size: clamp(18px, calc(12px + 1.2vw), 28px);
	font-family: "MaruBuri", serif;
	font-weight: 700;
	color: #1c2412;
}

.toc-arrow {
	font-size: clamp(18px, calc(12px + 1vw), 24px);
	color: rgba(60, 45, 20, 0.2);
	transition:
		color 0.2s,
		transform 0.3s;
}

.toc-item:hover .toc-arrow {
	color: #7a5c2a;
	transform: translateX(8px);
}

/* ── 커서 팔로우 이미지 ── */
.toc-img-follow {
	position: fixed;
	top: 0;
	left: 0;
	width: 320px;
	aspect-ratio: 4 / 3;
	pointer-events: none;
	opacity: 0;
	z-index: 2;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}

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

/* 반응형 */
@media (max-width: 768px) {
	.toc-sec {
		padding: 80px 24px;
		cursor: auto;
	}
	.toc-item {
		grid-template-columns: 36px 1fr auto;
		gap: 20px;
		padding: 28px 0;
		cursor: auto;
	}
	.toc-img-follow {
		display: none;
	}
	.toc-list:has(.toc-item:hover) .toc-item:not(:hover) {
		opacity: 1;
	}
}

@media (max-width: 499px) {
	.toc-item {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.toc-num,
	.toc-arrow {
		display: none;
	}
}

/* ================================================================
   섹션 4 — 구독 CTA
   ================================================================ */
.sub-sec {
	position: relative;
	width: 100%;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(175deg, #1c3525 0%, #162c1e 100%);
	overflow: hidden;
}

.sub-sec::before {
	content: "";
	position: absolute;
	inset: 24px;
	border: 1px solid rgba(201, 168, 76, 0.15);
	pointer-events: none;
}

.sub-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
	padding: 80px 40px;
}

.sub-ornament {
	font-size: 12px;
	color: rgba(201, 168, 76, 0.5);
}

.sub-label {
	font-size: clamp(14px, calc(10px + 0.6vw), 18px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 300;
	color: rgba(201, 168, 76, 0.55);
}

.sub-tit {
	font-size: clamp(22px, calc(14px + 2vw), 40px);
	font-family: "MaruBuri", serif;
	font-weight: 700;
	color: #f5f0e8;
	line-height: 1.2;
}

.sub-desc {
	font-size: clamp(14px, calc(10px + 0.8vw), 20px);
	font-family: "MaruBuri", serif;
	font-weight: 400;
	color: rgba(220, 200, 160, 0.6);
	margin-top: 4px;
}

.sub-btn {
	display: inline-block;
	margin-top: 16px;
	padding: 16px 48px;
	border: 1px solid rgba(201, 168, 76, 0.5);
	color: rgba(201, 168, 76, 0.85);
	font-size: clamp(14px, calc(10px + 0.6vw), 18px);
	font-family: "Pretendard Variable", sans-serif;
	font-weight: 300;
	text-decoration: none;
	transition:
		background 0.25s,
		color 0.25s;
}

.sub-btn:hover {
	background: rgba(201, 168, 76, 0.15);
	color: #f5edd8;
}

/* 반응형 */
@media (max-width: 768px) {
	.toc-sec {
		padding: 80px 24px;
	}
	.toc-item {
		grid-template-columns: 36px 1fr auto;
		gap: 20px;
		padding: 24px 0;
	}
	.sub-sec::before {
		inset: 16px;
	}
}

@media (max-width: 499px) {
	.toc-sec {
		padding: 60px 20px;
	}
	.toc-item {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.toc-num,
	.toc-arrow {
		display: none;
	}
}

/* ── 반응형 (scene-wrap scale) ── */
@media (max-width: 999px) {
	.lb-scene-wrap {
		transform: scale(0.82);
		transform-origin: center center;
	}
}

@media (max-width: 768px) {
	.lb-scene-wrap {
		transform: scale(0.62);
	}

	/* 모바일 카드 — 2열 그리드로 전환 */
	.lb-cards-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		width: 280px;
		height: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.lb-card {
		position: relative;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
	}

	.lb-card-img {
		height: 100px;
	}
}

@media (max-width: 499px) {
	.lb-scene-wrap {
		transform: scale(0.46);
	}

	.lb-cards-wrap {
		width: 240px;
		gap: 8px;
	}
}