/* ── 동네산책 소개 페이지 — 프론트와 동일 1080px · 녹색 톤 ── */

body.dw-site.dw-about {
	--dw-about-line: #7aa364;
	--dw-about-line-soft: #a8c896;
	--dw-about-bg-head: #eaf3de;
	--dw-about-bg-head-2: #dcecc8;
	--dw-about-bg-foot: #f6faf2;
	--dw-about-text: #3d5c28;
	--dw-about-text-muted: #5a7348;
	--dw-about-accent: #6d9460;
}

/* 헤더↔본문 간격: 프론트 .dw-popular 와 동일 (padding-top 28px) */
body.dw-site.dw-about .dw-page-body > main.dw-about-wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 28px 24px 80px;
	box-sizing: border-box;
}

/* 상단 컨셉 박스 (C안) */
.dw-about-intro {
	width: 100%;
	margin: 0 0 28px;
}

.dw-about-intro__box {
	background: #fff;
	border: 2px solid var(--dw-about-line-soft);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(122, 163, 100, 0.12);
}

.dw-about-intro__head {
	background: linear-gradient(135deg, var(--dw-about-bg-head) 0%, var(--dw-about-bg-head-2) 100%);
	color: var(--dw-about-text);
	padding: 20px 22px 18px;
}

.dw-about-intro__eyebrow {
	font-family: 'Nanum Gothic', 'Pretendard', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dw-about-text-muted);
	margin-bottom: 10px;
}

.dw-about-intro__title {
	font-family: 'Nanum Myeongjo', 'Pretendard', serif;
	font-size: clamp(22px, 4.5vw, 28px);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.03em;
	color: var(--dw-about-text);
}

.dw-about-intro__body {
	padding: 22px 22px 8px;
	font-family: 'Pretendard', 'Nanum Gothic', sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: #444;
	letter-spacing: -0.02em;
}

.dw-about-intro__body p {
	margin-bottom: 16px;
}

.dw-about-intro__body p:last-child {
	margin-bottom: 0;
}

.dw-about-intro__body strong {
	font-weight: 700;
	color: #1a1a1a;
}

.dw-about-intro__term {
	color: var(--dw-about-accent);
}

.dw-about-intro__foot {
	padding: 16px 22px 20px;
	border-top: 2px solid var(--dw-about-line-soft);
	background: var(--dw-about-bg-foot);
}

.dw-about-intro__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.dw-about-intro__tags span {
	display: inline-block;
	font-family: 'Nanum Gothic', 'Pretendard', sans-serif;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border: 1.5px solid var(--dw-about-line);
	border-radius: 20px;
	background: #fff;
	color: var(--dw-about-text);
	letter-spacing: -0.02em;
}

.dw-about-intro__hint {
	font-size: 13px;
	color: #777;
	text-align: center;
	letter-spacing: -0.02em;
	padding-top: 2px;
}

.dw-about-intro__hint::before {
	content: '↓ ';
	color: var(--dw-about-accent);
	font-weight: 700;
}

/* 웹툰 컨테이너 */
.comic-wrap,
.dw-about-comic {
	width: 100%;
	margin: 0 auto;
}

.comic {
	background: #fff;
	border: 2px solid var(--dw-about-line-soft);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(122, 163, 100, 0.1);
}

.comic-title {
	border-bottom: 3px solid var(--dw-about-line-soft);
	padding: 22px 0 18px;
	text-align: center;
	background: #fff;
}

.comic-title__name {
	font-family: 'Nanum Myeongjo', serif;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--dw-about-text);
}

.comic-title__sub {
	font-size: 11px;
	color: var(--dw-about-text-muted);
	margin-top: 5px;
	letter-spacing: 0.05em;
}

/* 패널 SVG — 컨테이너 너비에 맞춰 비율 유지 */
.dw-about-comic .panel > svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* SVG 선·채움 — 검정(#111) → 녹색 계열 */
.dw-about-comic svg [stroke="#111"] {
	stroke: var(--dw-about-line);
}

.dw-about-comic svg [fill="#111"] {
	fill: var(--dw-about-line);
}

.dw-about-comic svg text[fill="#111"] {
	fill: var(--dw-about-text);
}

/* 챕터 타이틀 */
.ep {
	background: linear-gradient(90deg, var(--dw-about-bg-head) 0%, var(--dw-about-bg-head-2) 100%);
	color: var(--dw-about-text);
	font-family: 'Nanum Myeongjo', serif;
	font-size: 15px;
	font-weight: 800;
	padding: 9px 14px;
	letter-spacing: 0.08em;
	border-bottom: 2px solid var(--dw-about-line-soft);
}

/* 패널 행 */
.row {
	display: flex;
	border-bottom: 2px solid var(--dw-about-line-soft);
}

.row:last-child {
	border-bottom: none;
}

/* 개별 패널 */
.panel {
	position: relative;
	overflow: hidden;
	border-right: 2px solid var(--dw-about-line-soft);
	background: #fff;
	flex-shrink: 0;
}

.panel:last-child {
	border-right: none;
}

/* 말풍선 */
.b {
	position: absolute;
	background: #fff;
	border: 2px solid var(--dw-about-line);
	border-radius: 22px;
	padding: 6px 12px;
	font-size: clamp(11px, 0.95vw, 13px);
	line-height: 1.55;
	font-weight: 700;
	font-family: 'Nanum Gothic', sans-serif;
	color: var(--dw-about-text);
	z-index: 30;
}

.bd::after {
	content: '';
	position: absolute;
	bottom: -13px;
	left: 14px;
	border: 6px solid transparent;
	border-top: 13px solid var(--dw-about-line);
}

.bd::before {
	content: '';
	position: absolute;
	bottom: -9px;
	left: 16px;
	border: 4px solid transparent;
	border-top: 9px solid #fff;
	z-index: 1;
}

.bdr::after {
	content: '';
	position: absolute;
	bottom: -13px;
	right: 14px;
	border: 6px solid transparent;
	border-top: 13px solid var(--dw-about-line);
}

.bdr::before {
	content: '';
	position: absolute;
	bottom: -9px;
	right: 16px;
	border: 4px solid transparent;
	border-top: 9px solid #fff;
	z-index: 1;
}

.bt::after {
	content: '';
	position: absolute;
	top: -13px;
	left: 14px;
	border: 6px solid transparent;
	border-bottom: 13px solid var(--dw-about-line);
}

.bt::before {
	content: '';
	position: absolute;
	top: -9px;
	left: 16px;
	border: 4px solid transparent;
	border-bottom: 9px solid #fff;
	z-index: 1;
}

.bth {
	border-radius: 50%;
	padding: 9px 16px;
}

.bth::after {
	content: '• •';
	position: absolute;
	bottom: -20px;
	left: 12px;
	font-size: 9px;
	color: var(--dw-about-line);
	letter-spacing: 4px;
}

/* 나레이션 박스 */
.nr {
	position: absolute;
	background: var(--dw-about-line);
	color: #fff;
	font-size: clamp(9px, 0.85vw, 11px);
	padding: 4px 9px;
	font-weight: 700;
	font-family: 'Nanum Gothic', sans-serif;
	z-index: 30;
	letter-spacing: 0.03em;
	border-radius: 2px;
}

/* 반응형 — 공통 브레이크포인트 768px */
@media (max-width: 768px) {
	body.dw-site.dw-about .dw-page-body > main.dw-about-wrap {
		padding: 28px 16px 56px;
	}

	.dw-about-intro {
		margin-bottom: 20px;
	}

	.dw-about-intro__head {
		padding: 16px 16px 14px;
	}

	.dw-about-intro__body {
		padding: 18px 16px 6px;
		font-size: 14px;
		line-height: 1.7;
	}

	.dw-about-intro__foot {
		padding: 14px 16px 16px;
	}

	.dw-about-intro__tags span {
		font-size: 11px;
		padding: 4px 10px;
	}

	.dw-about-intro__hint {
		font-size: 12px;
	}

	.comic-title__name {
		font-size: 28px;
	}

	.b {
		font-size: 10px;
		padding: 5px 9px;
	}
}