@charset "utf-8";

/* ============================================================
	march02 — 지난호보기 책장형
	수평 스크롤 책장 + 3D tilt 호버 + 클릭 디테일 패널
	============================================================ */

/* ============================================================
	페이지 헤더
	============================================================ */
.sh-header {
	padding: 120px 60px 64px;
	max-width: 1599px;
	margin: 0 auto;
}

.sh-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: 16px;
}

.sh-tit {
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 700;
	color: var(--color-text-main);
	font-family: var(--font-sub-title);
	margin-bottom: 16px;
}

.sh-desc {
	font-size: clamp(16px, calc(13px + 0.5vw), 20px);
	color: var(--color-text-sub);
}

/* ============================================================
	연도 필터
	============================================================ */
.sh-filter {
	padding: 0 60px 48px;
}

.sh-filter-inner {
	max-width: 1599px;
	margin: 0 auto;
	display: flex;
	gap: 10px;
}

.sh-filter-btn {
	padding: 8px 22px;
	font-size: clamp(14px, calc(12px + 0.3vw), 18px);
	font-weight: 500;
	color: var(--color-text-muted);
	background: none;
	border: 1.5px solid var(--color-border-strong);
	border-radius: 100px;
	cursor: pointer;
	transition:
		color 0.2s,
		border-color 0.2s,
		background 0.2s;
}

.sh-filter-btn.is-active,
.sh-filter-btn:hover {
	color: var(--color-text-main);
	border-color: var(--color-text-main);
	background: var(--color-text-main);
	color: var(--color-text-inverse);
}

/* ============================================================
	책장 — 수평 스크롤 컨테이너
	============================================================ */
.sh-shelf-wrap {
	position: relative;
	padding: 0 60px 80px;
	overflow: hidden;
}

.sh-shelf {
	display: flex;
	gap: 40px;
	align-items: flex-end;
	overflow-x: auto;
	overflow-y: visible;
	padding: 40px 20px 56px;
	cursor: grab;
	user-select: none;
	/* 스크롤바 숨김 */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sh-shelf::-webkit-scrollbar {
	display: none;
}

.sh-shelf.is-grabbing {
	cursor: grabbing;
}

/* ============================================================
	책 — 개별 아이템
	============================================================ */
.sh-book {
	flex: 0 0 auto;
	width: 260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	position: relative;
}

.sh-book.is-hidden {
	display: none;
}

/* 커버 */
.sh-book-cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	position: relative;
	overflow: hidden;
	border-radius: 4px 8px 8px 4px;
	box-shadow:
		-4px 0 8px rgba(0, 0, 0, 0.18),
		2px 4px 16px rgba(0, 0, 0, 0.22);
	transition: box-shadow 0.25s ease;
}

.sh-book:hover .sh-book-cover {
	box-shadow:
		-4px 0 12px rgba(0, 0, 0, 0.22),
		6px 12px 32px rgba(0, 0, 0, 0.32);
}

.sh-book-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	pointer-events: none;
}

.sh-book:hover .sh-book-cover img {
	transform: scale(1.04);
}

/* 광택 오버레이 */
.sh-book-shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.08) 100%);
	pointer-events: none;
	border-radius: inherit;
}

/* 책등 */
.sh-book-spine {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 4px 0;
}

.sh-spine-vol {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: var(--color-text-main);
}

.sh-spine-year {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
}

/* 선택된 책 */
.sh-book.is-active .sh-book-cover {
	outline: 2.5px solid var(--color-primary);
	outline-offset: 3px;
}

/* ============================================================
	연도 구분선
	============================================================ */
.sh-divider {
	flex: 0 0 auto;
	width: 1px;
	height: 180px;
	background: var(--color-border-strong);
	margin: 0 16px;
	align-self: flex-end;
	position: relative;
}

.sh-divider::before {
	content: attr(data-year-label);
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) rotate(-90deg);
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* ============================================================
	스크롤 힌트
	============================================================ */
.sh-scroll-hint {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-text-muted);
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	text-transform: uppercase;
	padding-left: 20px;
	opacity: 1;
	transition: opacity 0.5s;
}

.sh-scroll-hint.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* ============================================================
	디테일 패널
	============================================================ */
.sh-detail {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	width: 380px;
	background: var(--color-bg-main);
	box-shadow: -4px 0 40px rgba(0, 0, 0, 0.14);
	z-index: 200;
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
}

.sh-detail[aria-hidden="false"] {
	transform: translateX(0);
}

.sh-detail-inner {
	padding: 64px 40px 40px;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
}

.sh-detail-close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text-sub);
	border-radius: 50%;
	transition:
		background 0.2s,
		color 0.2s;
}

.sh-detail-close:hover {
	background: var(--color-bg-hover);
	color: var(--color-text-main);
}

.sh-detail-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.sh-detail-vol {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-primary);
}

.sh-detail-date {
	font-size: 18px;
	color: var(--color-text-muted);
}

.sh-detail-tit {
	font-size: clamp(22px, calc(18px + 0.6vw), 30px);
	font-weight: 700;
	color: var(--color-text-main);
	margin-bottom: 32px;
}

.sh-detail-toc {
	list-style: none;
	padding: 0;
	margin: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--color-border);
}

.sh-detail-toc li {
	font-size: clamp(15px, calc(13px + 0.3vw), 18px);
	color: var(--color-text-sub);
	padding: 14px 0;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	gap: 12px;
	opacity: 0;
	transform: translateX(12px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.sh-detail[aria-hidden="false"] .sh-detail-toc li {
	opacity: 1;
	transform: translateX(0);
}

.sh-detail-toc li::before {
	content: "";
	flex: 0 0 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-primary);
	opacity: 0.5;
}

.sh-detail-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
	padding: 14px 28px;
	font-size: 18px;
	font-weight: 600;
	color: var(--color-text-inverse);
	background: var(--color-text-main);
	border-radius: 6px;
	text-decoration: none;
	transition:
		background 0.2s,
		opacity 0.2s;
}

.sh-detail-link:hover {
	opacity: 0.85;
}

/* 백드롭 */
.sh-detail-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 199;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s;
}

.sh-detail-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ============================================================
	반응형 — 필수 구간 999 / 768 / 499
	============================================================ */

@media all and (max-width: 999px) {
	.sh-header {
		padding: 100px 24px 48px;
	}

	.sh-filter {
		padding: 0 24px 36px;
	}

	.sh-shelf-wrap {
		padding: 0 24px 60px;
	}

	.sh-book {
		width: 210px;
	}

	.sh-detail {
		width: 320px;
	}

	.sh-detail-inner {
		padding: 56px 28px 32px;
	}
}

@media all and (max-width: 768px) {
	.sh-header {
		padding: 88px 16px 40px;
	}

	.sh-filter {
		padding: 0 16px 28px;
	}

	.sh-shelf-wrap {
		padding: 0 0 48px;
	}

	.sh-shelf {
		padding: 32px 16px 48px;
	}

	.sh-book {
		width: 170px;
	}

	.sh-divider {
		height: 140px;
	}

	/* 모바일에서 패널은 하단 시트로 전환 */
	.sh-detail {
		width: 100%;
		height: 70vh;
		top: auto;
		bottom: 0;
		right: 0;
		left: 0;
		transform: translateY(100%);
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18);
	}

	.sh-detail[aria-hidden="false"] {
		transform: translateY(0);
	}

	.sh-detail-inner {
		padding: 48px 24px 32px;
	}
}

@media all and (max-width: 499px) {
	.sh-book {
		width: 140px;
	}

	.sh-shelf {
		gap: 24px;
	}

	.sh-filter-btn {
		padding: 6px 16px;
	}
}