@charset "utf-8";

/* ============================================================
   mmain08 — 스플릿 히어로형
   마우스 위치에 따라 분할선 이동 (CSS custom property)
   ============================================================ */
.m8-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 60px;
}

/* ============================================================
   S1: 스플릿 히어로
   ============================================================ */
.m8-hero {
	position: relative;
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
	cursor: col-resize;
	--split: 50%;
}

/* ── 좌/우 패널 ── */
.m8-pane {
	position: absolute;
	inset: 0;
}

.m8-pane img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 좌측: 베이스 (항상 보임) */
.m8-pane--left::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.42);
}

/* 우측: clip-path으로 분할 */
.m8-pane--right {
	clip-path: inset(0 0 0 var(--split));
	transition: clip-path 0.05s linear;
}
.m8-pane--right::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
}

/* 패널 라벨 (좌: 기억 / 우: 기록) */
.m8-pane-label {
	position: absolute;
	bottom: 52px;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);

	color: rgba(255, 255, 255, 0.55);
	z-index: 2;
}
.m8-pane--left .m8-pane-label  { left: 48px; }
.m8-pane--right .m8-pane-label { right: 48px; }

/* ── 분할선 ── */
.m8-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--split);
	transform: translateX(-50%);
	width: 1px;
	background: rgba(255, 255, 255, 0.6);
	z-index: 10;
	transition: left 0.05s linear;
	pointer-events: none;
}

.m8-divider-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.m8-divider-handle svg {
	width: 14px;
	height: 14px;
	color: #fff;
	flex-shrink: 0;
}

/* ── 중앙 텍스트 ── */
.m8-hero-body {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	pointer-events: none;
}

.m8-hero-meta {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);

	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 20px;
}

.m8-hero-tit {
	font-size: clamp(36px, calc(14px + 4vw), 80px);
	font-family: var(--font-sub-title);
	font-weight: 900;
	color: #fff;
	margin-bottom: 40px;
	text-shadow: 0 2px 32px rgba(0, 0, 0, 0.55);
}

.m8-hero-cta {
	pointer-events: all;
	display: inline-block;
	padding: 13px 40px;
	border: 1.5px solid rgba(255, 255, 255, 0.65);
	color: #fff;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);

	text-decoration: none;
	backdrop-filter: blur(4px);
	background: rgba(0, 0, 0, 0.15);
	transition: background 0.25s, border-color 0.25s;
}
@media (hover: hover) {
	.m8-hero-cta:hover {
		background: rgba(255, 255, 255, 0.18);
		border-color: #fff;
	}
}

/* ============================================================
   S2: 피처드 기사
   ============================================================ */
.m8-featured {
	padding: 96px 0 80px;
	background: var(--color-bg-main);
}

.m8-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 48px;
	border-bottom: 2px solid var(--color-text-main);
	padding-bottom: 18px;
}

.m8-section-label {
	font-size: clamp(22px, calc(10px + 2vw), 34px);
	font-weight: 900;
	font-family: var(--font-sub-title);
	color: var(--color-text-main);
}

.m8-section-vol {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);

	color: var(--color-text-muted);
}

/* 메인 카드(좌) + 리스트(우) */
.m8-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.m8-card { display: block; text-decoration: none; }

/* 메인 카드 */
.m8-card--main .m8-card-img {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 2px;
	margin-bottom: 22px;
}

/* 리스트 카드 */
.m8-card-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.m8-card--sm {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 18px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-border);
}
.m8-card--sm:first-child { border-top: 1px solid var(--color-border); }

.m8-card--sm .m8-card-img {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 2px;
}

.m8-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.65s ease;
}
@media (hover: hover) {
	.m8-card:hover .m8-card-img img { transform: scale(1.04); }
}

.m8-card-cate {
	display: block;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);

	color: var(--color-primary);
	margin-bottom: 8px;
}

.m8-card--main .m8-card-tit {
	font-size: clamp(20px, calc(8px + 1.8vw), 30px);
	font-weight: 700;
	font-family: var(--font-sub-title);
	color: var(--color-text-main);
	margin-bottom: 12px;
}

.m8-card--sm .m8-card-tit {
	font-size: clamp(16px, calc(6px + 1.4vw), 22px);
	font-weight: 700;
	font-family: var(--font-sub-title);
	color: var(--color-text-main);
}

.m8-card-desc {
	font-size: clamp(14px, calc(6px + 1.1vw), 18px);
	color: var(--color-text-sub);
}


/* ============================================================
   반응형 — 999px
   ============================================================ */
@media (max-width: 999px) {
	.m8-wrap { padding: 0 40px; }
	.m8-featured { padding: 72px 0 64px; }
	.m8-grid { gap: 28px; }
	.m8-card--sm { grid-template-columns: 96px 1fr; gap: 14px; }
	.m8-pane-label { bottom: 40px; }
	.m8-pane--left .m8-pane-label  { left: 36px; }
	.m8-pane--right .m8-pane-label { right: 36px; }
}

/* ============================================================
   반응형 — 768px
   ============================================================ */
@media (max-width: 768px) {
	.m8-wrap { padding: 0 20px; }

	/* 모바일: 마우스 없으므로 분할선 숨기고 50% 고정 */
	.m8-hero { cursor: default; }
	.m8-divider { display: none; }
	.m8-pane--right { clip-path: inset(0 0 0 50%); transition: none; }
	.m8-pane-label { bottom: 28px; font-size: 13px; }
	.m8-pane--left .m8-pane-label  { left: 20px; }
	.m8-pane--right .m8-pane-label { right: 20px; }

	.m8-featured { padding: 48px 0; }
	.m8-grid { grid-template-columns: 1fr; gap: 0; }
	.m8-card--main .m8-card-img { aspect-ratio: 16 / 9; margin-bottom: 16px; }
	.m8-card-list { margin-top: 28px; }
	.m8-card--sm { grid-template-columns: 80px 1fr; }


}

/* ============================================================
   반응형 — 499px
   ============================================================ */
@media (max-width: 499px) {
	.m8-wrap { padding: 0 16px; }
	.m8-card--sm { grid-template-columns: 68px 1fr; gap: 12px; padding: 16px 0; }
}