@charset "utf-8";

/* ============================================================
   mcat10 — 잡지 목차형 분류 (CONTENTS)
   mmain12 + msub20 디자인 언어 — 크림 배경 + 룰라인 + 커서팔로우
   ============================================================ */

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

body { background: #f9f8f6; }

/* ── 룰라인 공통 ── */
.mc10-rule {
	height: 1px;
	background: var(--color-text-main);
}
.mc10-rule--light {
	flex: 1;
	background: var(--color-border);
}

/* ============================================================
   S1: 목차 헤더
   ============================================================ */
.mc10-head {
	padding-top: 90px;
}

.mc10-head-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 60px 56px;
	text-align: center;
}

.mc10-head-meta {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 500;
	color: var(--color-text-muted);
	text-transform: uppercase;
	margin-bottom: 24px;
}

.mc10-dot { opacity: 0.35; }

.mc10-rule--top {
	margin-bottom: 28px;
	transform-origin: left center;
}

.mc10-head-tit {
	font-family: var(--font-sub-title);
	font-size: clamp(60px, calc(16px + 9vw), 160px);
	font-weight: 900;
	color: var(--color-text-main);
	text-transform: uppercase;
	overflow: hidden;
	margin-bottom: 28px;
}

.mc10-rule--bot {
	margin-bottom: 20px;
	transform-origin: right center;
}

.mc10-head-sub {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
	text-transform: uppercase;
}

/* ============================================================
   S2: 목차 본문
   ============================================================ */
.mc10-toc-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 60px 80px;
}

/* 섹션 */
.mc10-sec {
	display: flex;
	flex-direction: column;
}

/* 섹션 헤더 */
.mc10-sec-head {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 36px 0 0;
}

.mc10-sec-name {
	font-family: var(--font-sub-title);
	font-size: clamp(18px, calc(10px + 1.4vw), 24px);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--color-text-main);
	white-space: nowrap;
}

/* 기사 아이템 */
.mc10-item {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 28px;
	align-items: start;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 28px 0;
	border-bottom: 1px solid var(--color-border);
	text-decoration: none;
	color: var(--color-text-main);
	transition: transform 0.25s ease;
}

.mc10-item:hover { transform: translateX(10px); }

.mc10-num {
	font-family: var(--font-sub-title);
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: var(--color-text-muted);
	opacity: 0.35;
	padding-top: 3px;
	font-variant-numeric: tabular-nums;
	transition: opacity 0.25s ease, color 0.25s ease;
}

.mc10-item:hover .mc10-num {
	opacity: 1;
	color: var(--color-primary);
}

.mc10-item-tit {
	display: block;
	font-family: var(--font-sub-title);
	font-size: clamp(18px, calc(10px + 1.2vw), 24px);
	font-weight: 700;
	margin-bottom: 10px;
}

.mc10-item-desc {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
	word-break: keep-all;
}

.mc10-pg {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: var(--color-text-muted);
	opacity: 0.35;
	white-space: nowrap;
	padding-top: 3px;
	font-variant-numeric: tabular-nums;
	transition: opacity 0.25s ease;
}

.mc10-item:hover .mc10-pg { opacity: 1; }

/* ============================================================
   S3: 표지 링크
   ============================================================ */
.mc10-foot {
	padding: 48px 0 80px;
}

.mc10-foot-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mc10-back {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 600;
	color: var(--color-text-main);
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.mc10-back:hover { opacity: 0.5; }

.mc10-foot-info {
	display: flex;
	gap: 12px;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 500;
	color: var(--color-text-muted);
	text-transform: uppercase;
}

/* ============================================================
   커서 팔로우 이미지
   ============================================================ */
.mc10-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 300px;
	height: 225px;
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	overflow: hidden;
	will-change: transform, opacity;
	transition: opacity 0.25s ease;
}
.mc10-cursor.is-active { opacity: 1; }
.mc10-cursor img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (hover: none) { .mc10-cursor { display: none; } }

/* ============================================================
   반응형 — 999px
   ============================================================ */
@media (max-width: 999px) {
	.mc10-head { padding-top: 70px; }
	.mc10-head-inner { padding: 40px 40px 48px; }
	.mc10-toc-inner { padding: 0 40px 60px; }
	.mc10-foot-inner { padding: 0 40px; }
}

/* ============================================================
   반응형 — 768px
   ============================================================ */
@media (max-width: 768px) {
	.mc10-head-inner { padding: 28px 24px 32px; }
	.mc10-toc-inner { padding: 0 24px 32px; }
	.mc10-sec-head { padding: 28px 0 0; }
	.mc10-item { grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; }
	.mc10-item:hover { transform: none; }
	.mc10-pg { display: none; }
	.mc10-foot { padding: 28px 0 32px; }
	.mc10-foot-inner { padding: 0 24px; flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* ============================================================
   반응형 — 499px
   ============================================================ */
@media (max-width: 499px) {
	.mc10-head-inner { padding: 24px 20px 28px; }
	.mc10-toc-inner { padding: 0 20px 32px; }
	.mc10-foot { padding: 20px 0 28px; }
	.mc10-foot-inner { padding: 0 20px; }
	.mc10-item { grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 0; }
	.mc10-sec-head { gap: 14px; padding: 24px 0 0; }
}

/* ============================================================
   다크모드
   ============================================================ */
body.dark { background: #0d0d0d; }
body.dark .mc10-rule { background: var(--color-border-strong); }
body.dark .mc10-rule--light { background: var(--color-border); }
body.dark .mc10-item { border-bottom-color: var(--color-border); }