@charset "UTF-8";

:root {
	--ar-bg: #ffffff;
	--ar-text: #1a1612;
	--ar-dim: rgba(26, 22, 18, 0.5);
	--ar-gold: #b8922a;
	--ar-border: rgba(26, 22, 18, 0.1);
}

.ar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 48px;
}
.ar-sep {
	opacity: 0.3;
	margin: 0 0.5em;
}

/* ─── 히어로 ─── */
.ar-hero {
	padding: 140px 0 60px;
	border-bottom: 1px solid var(--ar-border);
}
.ar-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 48px;
}
.ar-hero-label {
	font-size: clamp(14px, calc(8px + 1vw), 18px);
	color: var(--ar-gold);
	font-family: "Paperlogy", sans-serif;
	font-weight: 600;
	margin-bottom: 12px;
}
.ar-hero-tit {
	font-size: clamp(36px, calc(20px + 2.5vw), 56px);
	font-weight: 800;
	color: var(--ar-text);
	font-family: "Paperlogy", sans-serif;
	margin-bottom: 16px;
}
.ar-hero-sub {
	font-size: clamp(16px, calc(10px + 0.8vw), 18px);
	color: var(--ar-dim);
	font-family: "Paperlogy", sans-serif;
}

/* ─── 연도 필터 ─── */
.ar-filter-wrap {
	position: sticky;
	top: 90px;
	z-index: 2;
	background: var(--ar-bg);
	border-bottom: 1px solid var(--ar-border);
	transition: top 0.25s ease;
}
@media (max-width: 999px) {
	.ar-filter-wrap {
		top: 70px;
	}
}
.ar-filter-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 48px;
	display: flex;
	gap: 0;
}
.ar-filter {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-size: clamp(14px, calc(8px + 1vw), 18px);
	font-family: "Paperlogy", sans-serif;
	color: var(--ar-dim);
	padding: 16px 24px;
	cursor: pointer;
	transition:
		color 0.2s,
		border-color 0.2s;
	margin-bottom: -1px;
}
.ar-filter:hover {
	color: var(--ar-text);
}
.ar-filter.is-active {
	color: var(--ar-text);
	border-bottom-color: var(--ar-text);
	font-weight: 600;
}

/* ─── 이슈 그리드 ─── */
.ar-body {
	padding: 48px 0 100px;
}
.ar-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px 20px;
}
.ar-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: transform 0.25s ease;
}
.ar-card:hover {
	transform: translateY(-4px);
}
.ar-card.is-hidden {
	display: none;
}

/* 커버 */
.ar-cover {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin-bottom: 10px;
}
.ar-cover-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	font-size: clamp(14px, calc(8px + 1vw), 18px);
	font-family: "Paperlogy", sans-serif;
	font-weight: 600;
	color: var(--ar-gold);
	background: rgba(0, 0, 0, 0.5);
	padding: 3px 10px;
	border: 1px solid rgba(184, 146, 42, 0.5);
}

/* 커버 색상 — 월별 순환 */
.ar-cover--01 {
	background: linear-gradient(155deg, #1a1a2e 0%, #16213e 100%);
}
.ar-cover--02 {
	background: linear-gradient(155deg, #1e1035 0%, #2d1e5c 100%);
}
.ar-cover--03 {
	background: linear-gradient(155deg, #0a2010 0%, #14381c 100%);
}
.ar-cover--04 {
	background: linear-gradient(155deg, #2a0e0e 0%, #481818 100%);
}
.ar-cover--05 {
	background: linear-gradient(155deg, #1a1408 0%, #302410 100%);
}
.ar-cover--06 {
	background: linear-gradient(155deg, #0e1a28 0%, #162a40 100%);
}
.ar-cover--07 {
	background: linear-gradient(155deg, #1e1230 0%, #321e50 100%);
}
.ar-cover--08 {
	background: linear-gradient(155deg, #1e1535 0%, #362660 100%);
}
.ar-cover--09 {
	background: linear-gradient(155deg, #2a1808 0%, #503010 100%);
}
.ar-cover--10 {
	background: linear-gradient(155deg, #0e2020 0%, #163030 100%);
}
.ar-cover--11 {
	background: linear-gradient(155deg, #1a0e28 0%, #2e1848 100%);
}
.ar-cover--12 {
	background: linear-gradient(155deg, #220e0e 0%, #3a1414 100%);
}

.ar-card--current .ar-cover {
	outline: 2px solid var(--ar-gold);
}

/* 카드 정보 */
.ar-card-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ar-card-vol {
	font-size: clamp(14px, calc(8px + 1vw), 18px);
	color: var(--ar-gold);
	font-family: "Paperlogy", sans-serif;
	font-weight: 600;
}
.ar-card-date {
	font-size: clamp(14px, calc(8px + 1vw), 18px);
	color: var(--ar-dim);
	font-family: "Paperlogy", sans-serif;
}

/* ─── Responsive: 999px ─── */
@media (max-width: 999px) {
	.ar-inner {
		padding: 0 32px;
	}
	.ar-hero-inner {
		padding: 0 32px;
	}
	.ar-hero {
		padding: 120px 0 48px;
	}
	.ar-filter-inner {
		padding: 0 32px;
	}
	.ar-filter-wrap {
		top: 70px;
	}
	.ar-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ─── Responsive: 768px ─── */
@media (max-width: 768px) {
	.ar-inner {
		padding: 0 20px;
	}
	.ar-hero-inner {
		padding: 0 20px;
	}
	.ar-hero {
		padding: 100px 0 32px;
	}
	.ar-filter-inner {
		padding: 0 20px;
	}
	.ar-filter {
		padding: 14px 16px;
	}
	.ar-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px 12px;
	}
	.ar-body {
		padding: 32px 0 60px;
	}
}

/* ─── Responsive: 499px ─── */
@media (max-width: 499px) {
	.ar-hero {
		padding: 90px 0 28px;
	}
	.ar-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px 10px;
	}
}