@charset "utf-8";

/* ============================================================
   march16 — 모던 FM 아카이브 스플릿형
   2열 카드 + 호버 시 우측 기사 목차 슬라이드인
   ============================================================ */

:root {
	--ma16-bg:    #ffffff;
	--ma16-red:   #e8002d;
	--ma16-ink:   #0a0a0a;
	--ma16-muted: #888888;
	--ma16-rule:  #e8e8e8;
}

body {
	background: var(--ma16-bg);
}
body.dark {
	background: #0a0a0a;
}

body.page-light-header #header,
body.page-light-header #header.on,
body.page-light-header #header.act {
	background-color: var(--ma16-bg) !important;
}

.ma16-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 60px;
}

/* ═══════════════════════════════════════════
   S1: 히어로
   ═══════════════════════════════════════════ */
.ma16-hero {
	padding: 130px 0 56px;
	border-bottom: 1px solid var(--ma16-rule);
}
.ma16-hero-inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
}
.ma16-hero-live {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}
.ma16-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ma16-red);
	animation: ma16pulse 1.2s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes ma16pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.1; }
}
.ma16-live-txt {
	font-size: clamp(14px, calc(6px + 1vw), 18px);
	font-weight: 700;
	color: var(--ma16-red);
}
.ma16-hero-tit {
	font-size: clamp(40px, calc(14px + 4.5vw), 80px);
	font-weight: 900;
	color: var(--ma16-ink);
	margin-bottom: 14px;
}
.ma16-hero-tit-red { color: var(--ma16-red); }
.ma16-hero-desc {
	font-size: clamp(15px, calc(6px + 1.1vw), 18px);
	color: var(--ma16-muted);
	word-break: keep-all;
}
.ma16-hero-stats {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
	padding-bottom: 6px;
}
.ma16-hstat { text-align: center; padding: 0 28px; }
.ma16-hstat:first-child { padding-left: 0; }
.ma16-hstat-num {
	display: block;
	font-size: clamp(28px, calc(10px + 2.5vw), 48px);
	font-weight: 900;
	color: var(--ma16-ink);
	font-family: var(--font-mono, monospace);
}
.ma16-hstat-lbl {
	display: block;
	font-size: clamp(14px, calc(5px + 1vw), 16px);
	color: var(--ma16-muted);
	margin-top: 4px;
}
.ma16-hstat-sep {
	width: 1px;
	height: 40px;
	background: var(--ma16-rule);
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   S2: 연도 탭 바 (스티키)
   ═══════════════════════════════════════════ */
.ma16-year-bar {
	position: sticky;
	top: 90px;
	z-index: 100;
	background: var(--ma16-bg);
	border-bottom: 1px solid var(--ma16-rule);
	transition: top 0.25s ease;
}
.ma16-year-bar .ma16-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ma16-year-tabs { display: flex; }
.ma16-ytab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 16px 24px;
	font-size: clamp(14px, calc(6px + 1vw), 18px);
	font-weight: 600;
	color: var(--ma16-muted);
	cursor: pointer;
	margin-bottom: -1px;
	transition: color 0.2s, border-color 0.2s;
}
.ma16-ytab:hover { color: var(--ma16-ink); }
.ma16-ytab--on { color: var(--ma16-red); border-bottom-color: var(--ma16-red); }
.ma16-count {
	font-size: clamp(14px, calc(5px + 1vw), 16px);
	color: var(--ma16-muted);
}

/* ═══════════════════════════════════════════
   S3: 이슈 카드 그리드 — 2열 풀폭
   ═══════════════════════════════════════════ */
.ma16-archive {
	padding-bottom: 0;
}
.ma16-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}

/* ── 카드 ── */
.ma16-card {
	border-bottom: 1px solid var(--ma16-rule);
	cursor: pointer;
}
.ma16-card:nth-child(odd) {
	border-right: 1px solid var(--ma16-rule);
}
.ma16-card.is-hidden { display: none; }

/* 이미지 + 슬라이드 디테일 */
.ma16-card-img {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.ma16-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
	filter: grayscale(0.1);
}
.ma16-card:hover .ma16-card-img img {
	transform: scale(1.03) translateX(-4%);
}

/* 디테일 패널 — 우측에서 슬라이드인 */
.ma16-card-detail {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: var(--ma16-ink);
	transform: translateX(100%);
	transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}
.ma16-card:hover .ma16-card-detail {
	transform: translateX(0);
}
.ma16-detail-inner {
	padding: 28px 24px;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
}
.ma16-detail-vol {
	display: block;
	font-size: clamp(22px, calc(8px + 2vw), 36px);
	font-weight: 900;
	color: var(--ma16-red);
	font-family: var(--font-mono, monospace);
	margin-bottom: 4px;
}
.ma16-detail-date {
	font-size: clamp(14px, calc(5px + 1vw), 16px);
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 18px;
}
.ma16-detail-rule {
	height: 1px;
	background: rgba(232, 0, 45, 0.35);
	margin-bottom: 18px;
}
.ma16-detail-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.ma16-detail-list li {
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	font-size: clamp(14px, calc(5px + 1.1vw), 18px);
	color: rgba(255, 255, 255, 0.85);
	word-break: keep-all;
}
.ma16-detail-list li:last-child { border-bottom: none; }
.ma16-detail-cat {
	font-size: clamp(12px, calc(4px + 0.8vw), 14px);
	color: var(--ma16-red);
	font-weight: 700;
	margin-right: 8px;
}

/* 하단 정보 바 */
.ma16-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-top: 1px solid var(--ma16-rule);
}
.ma16-card-vol {
	font-size: clamp(18px, calc(8px + 1.4vw), 24px);
	font-weight: 900;
	color: var(--ma16-ink);
	font-family: var(--font-mono, monospace);
}
.ma16-card-date {
	font-size: clamp(14px, calc(5px + 1vw), 16px);
	color: var(--ma16-muted);
}

/* ═══════════════════════════════════════════
   반응형 — 999px
   ═══════════════════════════════════════════ */
@media all and (max-width: 999px) {
	.ma16-wrap { padding: 0 32px; }
	.ma16-year-bar { top: 70px; }
	.ma16-hero-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
	.ma16-detail-inner { padding: 20px 18px; }
}

/* ═══════════════════════════════════════════
   반응형 — 768px
   ═══════════════════════════════════════════ */
@media all and (max-width: 768px) {
	.ma16-wrap { padding: 0 20px; }
	.ma16-hero { padding: 100px 0 40px; }
	.ma16-grid { grid-template-columns: 1fr; }
	.ma16-card:nth-child(odd) { border-right: none; }
	.ma16-card-detail { width: 60%; }
	.ma16-ytab { padding: 14px 16px; }
	.ma16-hstat { padding: 0 16px; }
}

/* ═══════════════════════════════════════════
   반응형 — 499px
   ═══════════════════════════════════════════ */
@media all and (max-width: 499px) {
	.ma16-wrap { padding: 0 16px; }
	.ma16-card-detail { width: 75%; }
	.ma16-ytab { padding: 12px 10px; }
}