@charset "utf-8";

/* ============================================================
   msub21 — 텍스트 스크램블 에디토리얼형 (베이지 2단 그리드)
   ============================================================ */

body {
	background: #f5f2ee;
}

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

/* ── 스크램블 중 문자 색상 ── */
.ms21-sc {
	color: rgba(28, 24, 18, 0.18);
}

/* ── 읽기 진행 바 ── */
.ms21-progress-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: rgba(28, 24, 18, 0.07);
	z-index: 10000;
}
.ms21-progress-bar {
	height: 100%;
	width: 0%;
	background: rgba(28, 24, 18, 0.45);
	transition: width 0.1s linear;
}

/* ── 페이지 래퍼 ── */
.ms21-page {
	padding-top: 90px;
}

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

/* 스크램블 요소 — JS 실행 전 숨김 */
[data-scramble] {
	opacity: 0;
}

/* ============================================================
   ① 메타 바
   ============================================================ */
.ms21-meta-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 24px;
	padding-bottom: 12px;
}

.ms21-meta-sep,
.ms21-byline {
	opacity: 0;
}

.ms21-cat {
	font-size: clamp(14px, calc(10px + 0.5vw), 18px);
	font-weight: 700;
	color: rgba(28, 24, 18, 0.5);
	text-transform: uppercase;
}

.ms21-meta-sep {
	color: rgba(28, 24, 18, 0.25);
	font-size: clamp(14px, calc(10px + 0.5vw), 18px);
}

.ms21-date {
	font-size: clamp(14px, calc(10px + 0.5vw), 18px);
	color: rgba(28, 24, 18, 0.3);
}

.ms21-byline {
	font-size: clamp(14px, calc(10px + 0.5vw), 18px);
	color: rgba(28, 24, 18, 0.3);
	margin-left: auto;
}

/* ============================================================
   ② 제목
   ============================================================ */
.ms21-head {
	padding-bottom: 12px;
}

.ms21-title {
	font-size: clamp(26px, calc(12px + 2.4vw), 46px);
	font-family: var(--font-sub-title);
	font-weight: 900;
	color: #1c1810;
	word-break: keep-all;
	margin-bottom: 8px;
}

.ms21-deck {
	font-size: clamp(18px, calc(10px + 0.7vw), 20px);
	color: rgba(28, 24, 18, 0.45);
	word-break: keep-all;
	opacity: 0;
	transform: translateY(6px);
}

/* ============================================================
   ③ 구분선
   ============================================================ */
.ms21-main-rule-wrap {
	padding-bottom: 0;
}

.ms21-main-rule {
	height: 2px;
	background: rgba(28, 24, 18, 0.14);
	opacity: 1;
	transform: scaleX(0);
	transform-origin: left;
}

/* ============================================================
   ④ 본문 그리드
   ============================================================ */
.ms21-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 36px;
	padding-top: 20px;
	padding-bottom: 36px;
	align-items: start;
	opacity: 0;
	transform: translateY(12px);
}

/* ─ 왼쪽: 본문 ─ */
.ms21-body-col {
	min-width: 0;
}

.ms21-p {
	font-size: clamp(18px, calc(10px + 0.6vw), 19px);
	color: rgba(28, 24, 18, 0.72);
	word-break: keep-all;
	margin-bottom: 14px;
}
.ms21-p:last-child {
	margin-bottom: 0;
}

.ms21-dropcap::first-letter {
	float: left;
	font-size: clamp(44px, 4.8vw, 70px);
	font-family: var(--font-sub-title);
	font-weight: 900;
	color: #1c1810;
	margin: 2px 10px 0 0;
}

.ms21-sh {
	font-size: clamp(18px, calc(10px + 0.7vw), 20px);
	font-family: var(--font-sub-title);
	font-weight: 700;
	color: rgba(28, 24, 18, 0.38);
	margin: 16px 0 12px;
}

/* ─ 오른쪽: 이미지·풀쿼트·바이오 ─ */
.ms21-side-col {
	min-width: 0;
}

/* ── 이미지 ── */
.ms21-fig {
	margin: 0 0 14px;
}

.ms21-fig-img-wrap {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ms21-fig-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ms21-fig-cap {
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: rgba(28, 24, 18, 0.3);
	font-style: italic;
	margin-top: 8px;
}

/* ── 풀쿼트 ── */
.ms21-pq-wrap {
	margin-bottom: 14px;
}

.ms21-pq-rule {
	height: 1px;
	background: rgba(28, 24, 18, 0.1);
}

.ms21-pq {
	padding: 14px 0;
	margin: 0;
}

.ms21-pq-text {
	font-size: clamp(18px, calc(10px + 1vw), 22px);
	font-family: var(--font-sub-title);
	font-weight: 800;
	color: #1c1810;
	word-break: keep-all;
	margin-bottom: 8px;
}

.ms21-pq-cite {
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: rgba(28, 24, 18, 0.3);
	font-style: normal;
	opacity: 0;
}

/* ── 작가 바이오 ── */
.ms21-bio {
	padding-top: 14px;
	border-top: 1px solid rgba(28, 24, 18, 0.1);
}

.ms21-bio-inner {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.ms21-bio-label {
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	font-weight: 700;
	color: rgba(28, 24, 18, 0.22);
	text-transform: uppercase;
	white-space: nowrap;
	padding-top: 2px;
}

.ms21-bio-name {
	font-size: clamp(18px, calc(10px + 0.5vw), 18px);
	font-weight: 700;
	color: rgba(28, 24, 18, 0.82);
	margin-bottom: 4px;
}

.ms21-bio-desc {
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: rgba(28, 24, 18, 0.4);
	word-break: keep-all;
}

/* ============================================================
   ⑤ 관련 기사
   ============================================================ */
.ms21-related {
	padding-bottom: 24px;
	border-top: 1px solid rgba(28, 24, 18, 0.1);
	opacity: 0;
	transform: translateY(10px);
}

.ms21-related-label {
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	font-weight: 700;
	color: rgba(28, 24, 18, 0.28);
	text-transform: uppercase;
	padding: 12px 0 10px;
	border-bottom: 1px solid rgba(28, 24, 18, 0.08);
}

.ms21-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ms21-related-link {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(28, 24, 18, 0.06);
	text-decoration: none;
	transition: opacity 0.2s;
}
.ms21-related-link:hover {
	opacity: 0.55;
}

.ms21-related-cat {
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	font-weight: 700;
	color: rgba(28, 24, 18, 0.3);
	min-width: 52px;
	flex-shrink: 0;
}

.ms21-related-tit {
	font-size: clamp(18px, calc(10px + 0.6vw), 19px);
	color: rgba(28, 24, 18, 0.62);
	word-break: keep-all;
}

/* ============================================================
   ⑥ 하단 네비
   ============================================================ */
.ms21-footnav {
	padding-bottom: 48px;
	opacity: 0;
	transform: translateY(10px);
}

.ms21-footnav-rule {
	height: 1px;
	background: rgba(28, 24, 18, 0.1);
}

.ms21-footnav-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 0;
}

.ms21-footnav-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	max-width: 240px;
	transition: opacity 0.2s;
}
.ms21-footnav-link:hover {
	opacity: 0.5;
}

.ms21-footnav-next {
	text-align: right;
	align-items: flex-end;
}

.ms21-footnav-dir {
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: rgba(28, 24, 18, 0.25);
}

.ms21-footnav-tit {
	font-size: clamp(18px, calc(10px + 0.6vw), 19px);
	color: rgba(28, 24, 18, 0.58);
	word-break: keep-all;
}

.ms21-footnav-home {
	font-size: clamp(14px, calc(10px + 0.4vw), 18px);
	color: rgba(28, 24, 18, 0.32);
	text-decoration: none;
	transition: opacity 0.2s;
}
.ms21-footnav-home:hover {
	opacity: 0.5;
}

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

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

	.ms21-grid {
		grid-template-columns: 1fr 280px;
		gap: 28px;
	}
}

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

	.ms21-meta-bar {
		padding-top: 16px;
		flex-wrap: wrap;
		gap: 6px;
	}

	.ms21-byline {
		margin-left: 0;
		width: 100%;
	}

	.ms21-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ms21-side-col {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		align-items: start;
	}

	.ms21-fig {
		margin-bottom: 0;
	}

	.ms21-bio {
		grid-column: 1 / -1;
	}

	.ms21-footnav-inner {
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
	}

	.ms21-footnav-next {
		text-align: left;
		align-items: flex-start;
	}
}

/* ============================================================
   반응형 — 499px
   ============================================================ */
@media (max-width: 499px) {
	.ms21-side-col {
		grid-template-columns: 1fr;
	}

	.ms21-pq-text br {
		display: none;
	}
}

/* ============================================================
   msub21 — 다크모드
   ============================================================ */

body.dark .ms21-hero { background: var(--color-bg-main); }
body.dark .ms21-sc { color: rgba(255, 255, 255, 0.18); }
body.dark .ms21-progress-wrap { background: rgba(255, 255, 255, 0.05); }
body.dark .ms21-progress-bar { background: rgba(255, 255, 255, 0.45); }
body.dark .ms21-cat { color: rgba(255, 255, 255, 0.5); }
body.dark .ms21-meta-sep { color: rgba(255, 255, 255, 0.2); }
body.dark .ms21-date { color: rgba(255, 255, 255, 0.28); }
body.dark .ms21-byline { color: rgba(255, 255, 255, 0.28); }
body.dark .ms21-title { color: #ececec; }
body.dark .ms21-deck { color: rgba(255, 255, 255, 0.4); }
body.dark .ms21-main-rule { background: rgba(255, 255, 255, 0.12); }
body.dark .ms21-p { color: rgba(236, 236, 236, 0.72); }
body.dark .ms21-dropcap::first-letter { color: #ececec; }
body.dark .ms21-sh { color: rgba(255, 255, 255, 0.38); }
body.dark .ms21-fig-cap { color: rgba(255, 255, 255, 0.25); }
body.dark .ms21-pq-rule { background: rgba(255, 255, 255, 0.08); }
body.dark .ms21-pq-text { color: #ececec; }
body.dark .ms21-pq-cite { color: rgba(255, 255, 255, 0.28); }
body.dark .ms21-bio { border-top-color: rgba(255, 255, 255, 0.08); }
body.dark .ms21-bio-label { color: rgba(255, 255, 255, 0.2); }
body.dark .ms21-bio-name { color: rgba(236, 236, 236, 0.82); }
body.dark .ms21-bio-desc { color: rgba(255, 255, 255, 0.36); }
body.dark .ms21-related { border-top-color: rgba(255, 255, 255, 0.08); }
body.dark .ms21-related-label { color: rgba(255, 255, 255, 0.25); border-bottom-color: rgba(255, 255, 255, 0.08); }
body.dark .ms21-related-link { border-bottom-color: rgba(255, 255, 255, 0.05); }
body.dark .ms21-related-cat { color: rgba(255, 255, 255, 0.28); }
body.dark .ms21-related-tit { color: rgba(236, 236, 236, 0.6); }
body.dark .ms21-footnav-rule { background: rgba(255, 255, 255, 0.08); }
body.dark .ms21-footnav-dir { color: rgba(255, 255, 255, 0.22); }
body.dark .ms21-footnav-tit { color: rgba(236, 236, 236, 0.55); }
body.dark .ms21-footnav-home { color: rgba(255, 255, 255, 0.3); }