@charset "utf-8";

/* ============================================================
   msub20 — 에디토리얼 매거진 스프레드형
   mmain12 디자인 언어 — 커버라인 번호 스타일 + 커서 팔로우
   ============================================================ */

/* ── 페이지 배경 ── */
body {
	background: #f9f8f6;
}
body.dark {
	background: var(--color-bg-main);
}

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

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

/* ── 룰라인 ── */
.ms20-rule {
	height: 1px;
	background: var(--color-border);
	margin: 0;
}
.ms20-rule--strong {
	background: var(--color-text-main);
}

/* ============================================================
   ① 오프닝 스프레드
   ============================================================ */
.ms20-spread {
	padding-top: 90px;
}

.ms20-spread-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 28px 60px 56px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

/* 대형 이슈 번호 */
.ms20-spread-num {
	font-size: clamp(70px, 12vw, 170px);
	font-family: var(--font-sub-title);
	font-weight: 900;
	color: var(--color-text-main);
	opacity: 0.06;
	margin-bottom: -10px;
}

.ms20-spread-cat {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: var(--color-text-muted);
	text-transform: uppercase;
	margin-bottom: 16px;
}

.ms20-spread-tit {
	font-size: clamp(26px, calc(8px + 4.5vw), 62px);
	font-family: var(--font-sub-title);
	font-weight: 900;
	color: var(--color-text-main);
	word-break: keep-all;
	margin-bottom: 14px;
}

.ms20-spread-deck {
	font-size: clamp(18px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
	word-break: keep-all;
	margin-bottom: 16px;
}

.ms20-spread-rule {
	margin-bottom: 16px;
}

.ms20-byline {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ms20-byline-name {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 600;
	color: var(--color-text-main);
}

.ms20-byline-date {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
}

/* 스프레드 이미지 */
.ms20-spread-img-wrap {
	aspect-ratio: 2 / 3;
	overflow: hidden;
}

.ms20-spread-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	will-change: transform;
	transition: transform 0.6s ease;
}
.ms20-spread-img-wrap:hover img {
	transform: scale(1.04);
}

/* ── GSAP 초기 상태 ── */
.ms20-spread-num   { clip-path: inset(100% 0 0 0); }
.ms20-spread-cat   { opacity: 0; transform: translateY(8px); }
.ms20-spread-tit   { clip-path: inset(100% 0 0 0); }
.ms20-spread-deck,
.ms20-spread-rule,
.ms20-byline       { opacity: 0; }
.ms20-spread-img-wrap { opacity: 0; }

/* ============================================================
   ② 풀블리드 이미지
   ============================================================ */
.ms20-fullbleed {
	position: relative;
	height: 65vh;
	overflow: hidden;
}

.ms20-fullbleed-bg {
	position: absolute;
	inset: -25% 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
}

.ms20-fullbleed-dim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
}

.ms20-fullbleed-cap {
	position: absolute;
	bottom: 20px;
	right: 32px;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: rgba(255, 255, 255, 0.7);
	font-style: italic;
}

/* ============================================================
   ③⑥ 본문
   ============================================================ */
.ms20-body-sec {
	padding: 56px 0 0;
}

.ms20-body-sec--b {
	padding-top: 0;
	padding-bottom: 40px;
}

.ms20-body-inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 60px;
}

.ms20-art-p {
	font-size: clamp(18px, calc(10px + 0.8vw), 18px);
	font-family: var(--font-serif);
	color: var(--color-text-main);
	word-break: keep-all;
	margin-bottom: 20px;
}
.ms20-art-p:last-child {
	margin-bottom: 0;
}

/* 드롭캡 */
.ms20-dropcap::first-letter {
	float: left;
	font-size: clamp(46px, 5.5vw, 78px);
	font-family: var(--font-sub-title);
	font-weight: 900;
	color: var(--color-text-main);
	margin: 4px 12px 0 0;
}

/* ============================================================
   ④ 인라인 이미지
   ============================================================ */
.ms20-inline-fig {
	margin: 40px 0;
}

.ms20-inline-fig-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 60px;
}

.ms20-inline-img-wrap {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.ms20-inline-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: contrast(1.04);
	transition: filter 0.5s ease;
}
.ms20-inline-fig:hover .ms20-inline-img-wrap img {
	filter: contrast(1);
}

.ms20-inline-cap {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
	font-style: italic;
	margin-top: 12px;
}

/* ============================================================
   ⑤ 풀쿼트
   ============================================================ */
.ms20-pq-sec {
	padding: 0 0 40px;
}

.ms20-pq {
	padding: 32px 0;
	text-align: center;
	margin: 0;
}

.ms20-pq p {
	font-size: clamp(18px, calc(8px + 2.8vw), 42px);
	font-family: var(--font-sub-title);
	font-weight: 800;
	color: var(--color-text-main);
}

/* ============================================================
   ⑦ 작가 바이오
   ============================================================ */
.ms20-author {
	padding: 0 0 40px;
}

.ms20-author-inner {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	padding: 20px 0 0;
}

.ms20-author-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: var(--color-text-muted);
	text-transform: uppercase;
	white-space: nowrap;
	padding-top: 3px;
	min-width: 100px;
}

.ms20-author-name {
	font-size: clamp(18px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: var(--color-text-main);
	margin-bottom: 8px;
}

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

/* ============================================================
   ⑧ 이번 호 더 읽기
   ============================================================ */
.ms20-next {
	padding: 0 0 56px;
}

.ms20-next-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: var(--color-text-muted);
	text-transform: uppercase;
	padding: 14px 0;
}

.ms20-next-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.ms20-next-item {
	display: block;
	padding: 14px 0;
	border-top: 1px solid var(--color-border);
	text-decoration: none;
	color: var(--color-text-main);
	transition: transform 0.25s ease;
}
.ms20-next-item:nth-child(odd) {
	padding-right: 28px;
	border-right: 1px solid var(--color-border);
}
.ms20-next-item:nth-child(even) {
	padding-left: 28px;
}
.ms20-next-item:last-child,
.ms20-next-item:nth-last-child(2):nth-child(odd) {
	border-bottom: 1px solid var(--color-border);
}
.ms20-next-item:hover {
	transform: translateY(-3px);
}

.ms20-next-num {
	display: block;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: var(--color-text-muted);
	opacity: 0.4;
	margin-bottom: 4px;
	transition: opacity 0.25s ease, color 0.25s ease;
}
.ms20-next-item:hover .ms20-next-num {
	opacity: 1;
	color: var(--color-primary);
}

.ms20-next-cat {
	display: block;
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.ms20-next-tit {
	display: block;
	font-size: clamp(18px, calc(10px + 0.8vw), 18px);
	font-family: var(--font-sub-title);
	font-weight: 700;
	color: var(--color-text-main);
}

.ms20-next-foot {
	padding: 16px 0 0;
}

.ms20-back {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.2s;
}
.ms20-back:hover {
	color: var(--color-text-main);
}

/* ============================================================
   커서 팔로우 이미지
   ============================================================ */
.ms20-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;
}
.ms20-cursor.is-active {
	opacity: 1;
}
.ms20-cursor img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (hover: none) {
	.ms20-cursor { display: none; }
}

/* ============================================================
   반응형 — 999px
   ============================================================ */
@media (max-width: 999px) {
	.ms20-spread {
		padding-top: 70px;
	}

	.ms20-spread-inner {
		padding: 24px 40px 44px;
		gap: 36px;
	}

	.ms20-wrap {
		padding: 0 40px;
	}

	.ms20-body-inner,
	.ms20-inline-fig-inner {
		padding: 0 40px;
	}
}

/* ============================================================
   반응형 — 768px
   ============================================================ */
@media (max-width: 768px) {
	.ms20-spread-inner {
		grid-template-columns: 1fr;
		padding: 20px 20px 36px;
		gap: 24px;
	}

	.ms20-spread-img-wrap {
		aspect-ratio: 3 / 2;
	}

	.ms20-wrap {
		padding: 0 20px;
	}

	.ms20-body-inner,
	.ms20-inline-fig-inner {
		padding: 0 20px;
	}

	.ms20-body-sec {
		padding: 36px 0 0;
	}

	.ms20-fullbleed {
		height: 50vh;
	}

	.ms20-pq {
		padding: 24px 0;
	}

	.ms20-author-inner {
		flex-direction: column;
		gap: 12px;
	}

	.ms20-next-list {
		grid-template-columns: 1fr;
	}

	.ms20-next-item:nth-child(odd) {
		padding-right: 0;
		border-right: none;
	}
	.ms20-next-item:nth-child(even) {
		padding-left: 0;
	}
	.ms20-next-item:nth-last-child(2):nth-child(odd) {
		border-bottom: none;
	}
	.ms20-next-item {
		border-bottom: none !important;
	}
	.ms20-next-item:last-child {
		border-bottom: 1px solid var(--color-border) !important;
	}

	.ms20-byline {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* ============================================================
   반응형 — 499px
   ============================================================ */
@media (max-width: 499px) {
	.ms20-inline-fig {
		margin: 28px 0;
	}

	.ms20-pq p br {
		display: none;
	}
}