@charset "utf-8";

/* ============================================================
   mmain13 — 레트로 인쇄물형
   세피아 신문지 배경 + 그레이스케일 사진 + 룰라인 + 드롭캡
   ============================================================ */

/* ── 신문 테마 토큰 ── */
:root {
	--np-bg: #ededeb;
	--np-ink: #14120e;
	--np-red: #8b1a1a;
	--np-rule: #a8a6a0;
	--np-muted: #5a5854;
	--np-card: #d8d6d2;
	--np-lh: 1.4;
}

/* ── 페이지 배경 ── */
body {
	background: var(--np-bg);
}
body.dark {
	background: #1a1208;
}

/* ── 종이 질감 노이즈 오버레이 ── */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0.4;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 180px 180px;
}

/* ── 헤더 배경 (page-light-header) ── */
body.page-light-header #header,
body.page-light-header #header.on,
body.page-light-header #header.act {
	background-color: var(--np-bg) !important;
}

/* ── 공용 래퍼 ── */
.np-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 60px;
}

/* ── 룰라인 ── */
.np-rule {
	border: none;
	margin: 0;
}
.np-rule--thick {
	border-top: 3px solid var(--np-ink);
}
.np-rule--double {
	border-top: 3px double var(--np-ink);
}
.np-rule--thin {
	border-top: 1px solid var(--np-rule);
}

/* ── 이미지 그레이스케일 공통 ── */
.np-fig img {
	width: 100%;
	display: block;
	filter: grayscale(100%) contrast(1.06) sepia(10%);
	transition: filter 0.5s ease;
}
.np-art-link:hover .np-fig img {
	filter: grayscale(20%) contrast(1) sepia(15%);
}

/* ── 카테고리 키커 ── */
.np-kicker {
	display: block;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 700;
	color: var(--np-red);
	margin-bottom: 6px;
}
.np-kicker--hl {
	text-align: center;
}

/* ── 아티클 링크 리셋 ── */
.np-art-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* ── 읽기 더 보기 ── */
.np-readmore {
	display: inline-block;
	margin-top: 12px;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 600;
	color: var(--np-muted);
	border-bottom: 1px solid var(--np-rule);
	transition:
		color 0.2s,
		border-color 0.2s;
}
.np-art-link:hover .np-readmore {
	color: var(--np-ink);
	border-color: var(--np-ink);
}

/* ============================================================
   ① 마스트헤드
   ============================================================ */
.np-masthead {
	padding: 100px 0 0;
	background: var(--np-bg);
}

/* 애니메이션 초기 상태 */
.np-anim-rule-l {
	transform: scaleX(0);
	transform-origin: left;
}
.np-anim-rule-r {
	transform: scaleX(0);
	transform-origin: right;
}
.np-anim-title {
	opacity: 0;
	transform: translateY(-12px);
}
.np-anim-fade {
	opacity: 0;
}

/* 상단 메타바 */
.np-meta-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 10px;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	color: var(--np-muted);
}

/* 제호 */
.np-nameplate {
	font-size: clamp(32px, calc(4px + 9vw), 108px);
	font-weight: 900;
	font-family: var(--font-serif);
	color: var(--np-ink);
	text-align: center;
	padding: 18px 0 14px;
}

/* 날짜·슬로건 행 */
.np-date-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid var(--np-rule);
	border-bottom: 1px solid var(--np-rule);
	margin-bottom: 0;
}

.np-date-txt {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	color: var(--np-muted);
}

.np-slogan {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-style: italic;
	font-family: var(--font-serif);
	color: var(--np-ink);
}

/* 카테고리 네비 */
.np-nav {
	display: flex;
	justify-content: center;
	gap: 0;
	padding: 10px 0 20px;
}

.np-nav a {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 600;
	color: var(--np-ink);
	text-decoration: none;
	padding: 0 20px;
	border-right: 1px solid var(--np-rule);
	transition: color 0.2s;
}
.np-nav a:first-child {
	border-left: 1px solid var(--np-rule);
}
.np-nav a:hover {
	color: var(--np-red);
}

/* ============================================================
   ② 대형 헤드라인
   ============================================================ */
.np-headline-sec {
	padding: 0;
}

.np-headline-block {
	padding: 28px 0 24px;
	text-align: center;
}

.np-headline {
	font-size: clamp(32px, calc(8px + 4vw), 64px);
	font-weight: 900;
	font-family: var(--font-serif);
	color: var(--np-ink);
	margin: 10px 0 14px;
}

.np-headline-deck {
	font-size: clamp(16px, calc(5px + 1.5vw), 22px);
	color: var(--np-muted);
	font-style: italic;
	font-family: var(--font-serif);
}

/* ============================================================
   ③ 3단 본문
   ============================================================ */
.np-body-sec {
	padding: 36px 0 0;
}

.np-col3-grid {
	display: grid;
	grid-template-columns: 5fr 3fr 2fr;
	gap: 0;
}

/* 중간 컬럼: 양쪽 룰라인 */
.np-side-a {
	border-left: 1px solid var(--np-rule);
	border-right: 1px solid var(--np-rule);
	padding: 0 32px;
}

/* 오른쪽 컬럼 */
.np-side-b {
	padding: 0 0 0 32px;
}

/* 리드 기사 */
.np-lead {
	padding-right: 32px;
}

.np-fig--lead {
	margin-bottom: 20px;
}

.np-fig--lead figcaption {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	color: var(--np-muted);
	margin-top: 6px;
	font-style: italic;
}

.np-art-tit--lead {
	font-size: clamp(26px, calc(8px + 2.8vw), 44px);
	font-weight: 900;
	font-family: var(--font-serif);
	color: var(--np-ink);
	margin-bottom: 14px;
}

/* 드롭캡 */
.np-dropcap::first-letter {
	float: left;
	font-size: clamp(52px, 5.5vw, 80px);
	font-family: var(--font-serif);
	font-weight: 900;
	color: var(--np-ink);
	line-height: var(--np-lh);
	margin: 6px 10px 0 0;
}

/* 기사 공통 */
.np-art-tit {
	font-size: clamp(18px, calc(6px + 1.8vw), 26px);
	font-weight: 800;
	font-family: var(--font-serif);
	color: var(--np-ink);
	margin-bottom: 10px;
	transition: color 0.2s;
}
.np-art-link:hover .np-art-tit {
	color: var(--np-red);
}

.np-art-body {
	font-size: clamp(15px, calc(3px + 1.7vw), 18px);
	font-family: var(--font-serif);
	color: #2a2620;
	word-break: keep-all;
	line-height: var(--np-lh);
}

/* 사이드 기사 */
.np-side-art {
	padding: 20px 0;
}
.np-side-art:first-child {
	padding-top: 0;
}

.np-fig {
	margin-bottom: 14px;
}

/* 풀쿼트 */
.np-pullquote {
	border-top: 2px solid var(--np-ink);
	border-bottom: 2px solid var(--np-ink);
	padding: 20px 8px;
	text-align: center;
	margin: 4px 0;
}

.np-pullquote p {
	font-size: clamp(18px, calc(6px + 1.6vw), 24px);
	font-weight: 700;
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--np-ink);
}

.np-pullquote cite {
	display: block;
	margin-top: 12px;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-style: normal;
	color: var(--np-muted);
}

/* ── 잉크 번짐 효과 ── */
.np-nameplate {
	text-shadow:
		1px 1px 0px rgba(20, 18, 14, 0.22),
		-0.5px 0px 1px rgba(20, 18, 14, 0.12);
}

.np-headline {
	text-shadow:
		0.8px 0.8px 0px rgba(20, 18, 14, 0.18),
		0px 0px 1px rgba(20, 18, 14, 0.08);
}

.np-art-tit--lead {
	text-shadow:
		0.5px 0.5px 0px rgba(20, 18, 14, 0.15),
		0px 0px 0.8px rgba(20, 18, 14, 0.08);
}

/* ── 클래식 광고 박스 ── */
.np-ad-box {
	position: relative;
	border: 2px solid var(--np-ink);
	padding: 22px 18px;
	text-align: center;
	margin-top: 20px;
}

.np-ad-box::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid var(--np-ink);
	pointer-events: none;
}

.np-ad-label {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	color: var(--np-muted);
	margin-bottom: 10px;
}

.np-ad-tit {
	font-size: clamp(20px, calc(6px + 2vw), 30px);
	font-weight: 900;
	font-family: var(--font-serif);
	color: var(--np-ink);
	margin-bottom: 10px;
	text-shadow:
		0.5px 0.5px 0px rgba(20, 18, 14, 0.2),
		0px 0px 1px rgba(20, 18, 14, 0.1);
}

.np-ad-body {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-family: var(--font-serif);
	color: var(--np-muted);
	margin-bottom: 10px;
}

.np-ad-form {
	display: flex;
	gap: 0;
	margin-top: 14px;
}

.np-ad-input {
	flex: 1;
	padding: 7px 10px;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-family: var(--font-serif);
	border: 1.5px solid var(--np-ink);
	border-right: none;
	background: transparent;
	color: var(--np-ink);
	outline: none;
	min-width: 0;
}

.np-ad-input::placeholder {
	color: var(--np-muted);
}

.np-ad-cta {
	padding: 7px 14px;
	border: 1.5px solid var(--np-ink);
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 700;
	font-family: var(--font-serif);
	background: var(--np-ink);
	color: var(--np-bg);
	cursor: pointer;
	white-space: nowrap;
	transition:
		background 0.2s,
		color 0.2s;
}

.np-ad-cta:hover {
	background: var(--np-red);
	border-color: var(--np-red);
}

/* ============================================================
   ④ 섹션 디바이더
   ============================================================ */
.np-section-div {
	padding: 0;
	margin-top: 36px;
}

.np-section-label {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 700;
	color: var(--np-muted);
	text-align: center;
	padding: 10px 0;
}

/* ============================================================
   ⑤ 4열 소기사
   ============================================================ */
.np-grid-sec {
	padding: 28px 0 0;
}

.np-grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.np-grid-art {
	padding: 0 28px 36px 0;
	border-right: 1px solid var(--np-rule);
	padding-right: 28px;
}
.np-grid-art:first-child {
	padding-left: 0;
}
.np-grid-art + .np-grid-art {
	padding-left: 28px;
}
.np-grid-art:last-child {
	border-right: none;
}

/* ============================================================
   ⑥ 지난호 스트립
   ============================================================ */
.np-archive {
	padding: 0;
	margin-top: 36px;
}

.np-archive-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 16px 0;
}

.np-archive-label {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 700;
	color: var(--np-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.np-archive-list {
	display: flex;
	gap: 0;
	flex: 1;
}

.np-arc-item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 0 24px;
	border-right: 1px solid var(--np-rule);
	text-decoration: none;
	transition: color 0.2s;
}
.np-arc-item:first-child {
	padding-left: 0;
}
.np-arc-item:last-child {
	border-right: none;
}
.np-arc-item:hover {
	color: var(--np-red);
}

.np-arc-vol {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 700;
	color: var(--np-muted);
	white-space: nowrap;
}

.np-arc-tit {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	color: var(--np-ink);
}

.np-arc-more .np-arc-vol {
	color: var(--np-ink);
}

/* ============================================================
   ⑦ 구독 CTA — 빈티지 광고 박스
   ============================================================ */
.np-cta {
	padding: 48px 60px 72px;
}

.np-cta-box {
	position: relative;
	border: 2px solid var(--np-ink);
	padding: 44px 48px;
	max-width: 580px;
	margin: 0 auto;
	text-align: center;
}

/* 이중 테두리 — 인셋 선 */
.np-cta-box::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid var(--np-ink);
	pointer-events: none;
}

.np-cta-ornament {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	color: var(--np-muted);
	margin-bottom: 14px;
}

.np-cta-eyebrow {
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 700;
	color: var(--np-muted);
	margin-bottom: 12px;
}

.np-cta-tit {
	font-size: clamp(22px, calc(8px + 2vw), 34px);
	font-weight: 900;
	font-family: var(--font-serif);
	color: var(--np-ink);
	margin-bottom: 20px;
}

.np-cta-form {
	display: flex;
	gap: 0;
	margin-top: 20px;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.np-cta-input {
	flex: 1;
	padding: 10px 16px;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	border: 1.5px solid var(--np-ink);
	border-right: none;
	background: transparent;
	color: var(--np-ink);
	outline: none;
}
.np-cta-input::placeholder {
	color: var(--np-muted);
}

.np-cta-btn {
	padding: 10px 24px;
	font-size: clamp(14px, calc(4px + 1.4vw), 18px);
	font-weight: 700;
	background: var(--np-ink);
	color: var(--np-bg);
	border: 1.5px solid var(--np-ink);
	cursor: pointer;
	transition:
		background 0.2s,
		color 0.2s;
}
.np-cta-btn:hover {
	background: var(--np-red);
	border-color: var(--np-red);
}

/* ============================================================
   반응형 — 999px
   ============================================================ */
@media all and (max-width: 999px) {
	.np-wrap {
		padding: 0 32px;
	}

	.np-masthead {
		padding-top: 80px;
	}

	.np-col3-grid {
		grid-template-columns: 1fr 1fr;
	}

	/* 우측 컬럼은 1행 2열 차지 */
	.np-side-b {
		grid-column: 1 / -1;
		border-top: 1px solid var(--np-rule);
		padding: 24px 0 0;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 0 32px;
	}

	.np-side-a {
		border-right: none;
		padding-right: 0;
		padding-left: 28px;
	}

	.np-lead {
		padding-right: 28px;
	}

	.np-nav a {
		padding: 0 12px;
	}

	.np-grid4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.np-grid-art:nth-child(2) {
		border-right: none;
	}
	.np-grid-art:nth-child(3) {
		border-right: 1px solid var(--np-rule);
		padding-left: 0;
	}
	.np-grid-art:nth-child(n + 3) {
		padding-top: 28px;
		border-top: 1px solid var(--np-rule);
	}

	.np-cta {
		padding: 40px 32px 60px;
	}
}

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

	.np-masthead {
		padding-top: 70px;
	}

	.np-meta-bar {
		display: none;
	}

	.np-date-row {
		flex-direction: column;
		gap: 4px;
		text-align: center;
	}

	.np-nav {
		flex-wrap: wrap;
		gap: 0;
	}
	.np-nav a {
		padding: 4px 12px;
		border: none;
		border-right: 1px solid var(--np-rule);
	}

	.np-col3-grid {
		grid-template-columns: 1fr;
	}

	.np-side-a {
		border-left: none;
		border-right: none;
		border-top: 1px solid var(--np-rule);
		padding: 24px 0 0;
	}

	.np-side-b {
		grid-column: auto;
		border-top: 1px solid var(--np-rule);
		padding: 24px 0 0;
		display: block;
	}

	.np-lead {
		padding-right: 0;
	}

	.np-grid4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.np-archive-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.np-archive-list {
		flex-wrap: wrap;
	}
	.np-arc-item {
		padding: 4px 16px 4px 0;
		border-right: none;
	}

	.np-cta {
		padding: 32px 20px 52px;
	}
	.np-cta-box {
		padding: 32px 24px;
	}
	.np-cta-form {
		flex-direction: column;
	}
	.np-cta-input {
		border-right: 1.5px solid var(--np-ink);
		border-bottom: none;
	}

	.np-ad-form {
		flex-direction: column;
	}

	.np-ad-input {
		border-right: 1.5px solid var(--np-ink);
		border-bottom: none;
	}
}

/* ============================================================
   반응형 — 499px
   ============================================================ */
@media all and (max-width: 499px) {
	.np-grid4 {
		grid-template-columns: 1fr;
	}
	.np-grid-art {
		border-right: none;
		border-top: 1px solid var(--np-rule);
		padding: 20px 0 !important;
	}
	.np-grid-art:first-child {
		border-top: none;
		padding-top: 0;
	}

	.np-cta-box::before,
	.np-ad-box::before {
		display: none;
	}

	.np-grid-art:nth-child(3) {
		border-right: 0;
	}
}