/**
 * 기능 가이드 상세 (guide CPT · single-guide.php) — 레슨 골격.
 * 정본: design_handoff_dict_contents_main_final/ (셸 = 본문.dc.html · 규격 = 최종가이드.dc.html)
 *
 * 전 셀렉터 .gdp 스코프 — 전역 :root 오염 금지(핸드오프 계약).
 * 타이포·여백: 3차 수정(2026-08-12 사용자 확정) — 레슨(post-lecture.css)과 동일 스케일로 정합.
 *   히어로 clamp(30~46px)/800 · 리드 20px · 본문 16/1.85 · 섹션 22px(5px 바+밑줄) ·
 *   표 15px(셀 12×16) · 스텝 배지 36px 원 · 컬럼 1300(본문 fr + 레일 340, gap 48) · 분기점 1024/640.
 *   구조 토큰(--space-*·--px·--radius-nm·--shadow-*·--gray-*·--primary-light·--bg-subtle)은
 *   레슨과 동일한 라이브 테마 토큰을 직접 참조한다. 액센트 색만 가이드 제이드(--wk-jade-*) 유지.
 * 형광펜: 앰버 #FFF3A0 솔리드 — 이 페이지 스코프만(전역 초록 그라디언트 밴드 오버라이드, 사용자 확정).
 */

.gdp {
	/* ── 토큰 (핸드오프 §3 — .gdp 스코프 전용) ── */
	--wk-text-strong: #1B1B18;
	--wk-text:        #1F2937;
	--wk-text-sub:    #45453F;
	--wk-text-meta:   #57606A;
	--wk-text-mute:   #8B949E;
	--wk-text-faint:  #B4B4AF;

	--wk-bg:        #FFFFFF;
	--wk-surface:   #FAFAF8;
	--wk-chip:      #F5F5F3;
	--wk-badge:     #F0F0ED;
	--wk-hover:     #FBFBFA;

	--wk-line:      #E5E5E2;
	--wk-line-soft: #EFEFEC;
	--wk-line-step: #E4E4E0;

	--wk-cream:      #F7F4ED;
	--wk-cream-line: #E5DFCE;
	--wk-cream-mute: #8B8471;
	--wk-cream-num:  #B4AF9F;

	--wk-jade-500: #059669;
	--wk-jade-600: #047E57;
	--wk-jade-700: #036546;
	--wk-amber-hl: #FFF3A0;
	--wk-warn:     #B45309;

	--wk-code-head: #2A2A27;
	--wk-code-body: #1F1F1D;
	--wk-code-text: #D9D9D4;

	--wk-mono: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
	color: var(--wk-text);
	background: var(--wk-bg);
	-webkit-font-smoothing: antialiased;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.gdp *, .gdp *::before, .gdp *::after { box-sizing: border-box; }

/* GP 컨테이너 안전장치 — 사이드바 레이아웃이 남아 있어도 콘텐츠 영역을 전폭으로
   (1차 방어는 guide-cpt.php 의 generate_sidebar_layout 필터 = no-sidebar) */
body.single-guide .site-content .content-area { width: 100%; float: none; }

.gdp a { color: var(--wk-jade-600); text-decoration: none; transition: color 150ms ease, background 150ms ease, border-color 150ms ease; }
.gdp a:hover { color: var(--wk-jade-700); }
.gdp button { font-family: inherit; }

/* focus 한 겹 — outline 외 보더 변경·ring 중복 금지 */
.gdp a:focus-visible,
.gdp button:focus-visible {
	outline: 2px solid var(--wk-jade-600);
	outline-offset: 2px;
}

/* ─────────────────────────────────────────────
 * 셸 — 레슨 골격 그대로: 히어로 760 → 요약 800 → 밴드 920 → 본문 fr + 레일 340 (1300)
 * ───────────────────────────────────────────── */
.gdp .wk-lead  { max-width: 760px; margin: 0 auto; padding: 56px var(--px) var(--space-lg); text-align: center; }
.gdp .wk-intro { max-width: 800px; margin: var(--space-2xl) auto 0; padding: 0 var(--px); }
.gdp .wk-band  { max-width: 920px; margin: 0 auto; padding: 0 var(--px); }

.gdp .wk-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--space-2xl);
	max-width: 1300px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--px) 56px;
}
.gdp .wk-main { min-width: 0; }
.gdp .wk-ltoc { display: none; }

/* ─────────────────────────────────────────────
 * 센터 헤더 — 레슨 히어로 스케일
 * ───────────────────────────────────────────── */
.gdp .gd-crumb {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
	gap: 6px; font-size: 13px; color: var(--wk-text-mute); margin-bottom: var(--space-md);
}
.gdp .gd-crumb a { font-weight: 500; }
.gdp .gd-crumb .gd-crumb-cur { color: var(--wk-text-meta); }

.gdp .gd-h1 {
	font-size: clamp(30px, 4.5vw, 46px);
	font-weight: 800; color: var(--wk-text-strong);
	letter-spacing: -0.028em; line-height: 1.25;
	max-width: 18ch;
	margin: 0 auto var(--space-lg);
	text-wrap: pretty;
}

.gdp .gd-author { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-bottom: 14px; }
.gdp .gd-avatar {
	width: 36px; height: 36px; border-radius: 9999px; /* 아바타 — 완전 원형 허용처 */
	background: var(--wk-jade-500); color: #FFFFFF;
	font-size: 14px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	overflow: hidden; flex: none;
}
.gdp .gd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gdp .gd-author-text { font-size: 14px; color: var(--wk-text-meta); }
.gdp .gd-author-text b { font-weight: 700; color: var(--wk-text-strong); }

.gdp .gd-meta {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
	gap: var(--space-md); font-size: 13px; color: var(--wk-text-meta);
}
.gdp .gd-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.gdp .gd-meta-item svg { flex: none; }
.gdp .gd-meta-item b { font-weight: 700; color: var(--wk-text-strong); }
.gdp .gd-meta-sep { width: 1px; height: 12px; background: var(--wk-line); }

.gdp .gd-scrap {
	display: inline-flex; align-items: center; gap: 6px;
	height: 28px; padding: 0 11px;
	border: 1px solid var(--wk-line); background: #FFFFFF; border-radius: 6px;
	font-size: 12.5px; font-weight: 500; color: var(--wk-text-meta);
	cursor: pointer; transition: border-color 150ms ease, color 150ms ease;
}
.gdp .gd-scrap svg { fill: none; stroke: currentColor; }
.gdp .gd-scrap.is-on { border-color: var(--wk-jade-500); color: var(--wk-jade-600); }
.gdp .gd-scrap.is-on svg { fill: var(--wk-jade-500); stroke: var(--wk-jade-500); }

.gdp .gd-divider { width: 48px; height: 1px; background: var(--wk-line); margin: var(--space-lg) auto 0; }

/* ─────────────────────────────────────────────
 * 두괄식 리드 — 레슨 요약 카드(리드 20 + 설명 16.5) 스케일
 * ───────────────────────────────────────────── */
.gdp .gd-lede {
	font-size: 20px; font-weight: 700; color: var(--wk-text-strong);
	line-height: 1.55; letter-spacing: -0.01em; margin: 0; text-wrap: pretty;
}
.gdp .gd-lede + .gd-lede-sub { margin-top: var(--space-md); }
.gdp .gd-lede-sub { font-size: 16.5px; font-weight: 400; color: var(--wk-text-sub); line-height: 1.75; margin: 0; text-wrap: pretty; }
.gdp .gd-lede-sub + .gd-lede-sub { margin-top: var(--space-sm); }

/* 대표 이미지 — 레슨과 동일한 브라우저 창 프레임 + 16:9 통일(비율 다르면 contain 레터박스) */
.gdp .gd-thumb { margin-top: var(--space-xl); }
.gdp .gd-thumb-frame {
	position: relative;
	padding-top: 44px;                          /* 상단 바 공간 */
	background: var(--bg-subtle);
	border: 1px solid var(--surface-200);
	border-radius: var(--radius-lg);            /* 레슨 프레임과 동일 (16px) */
	overflow: hidden;
	box-shadow: var(--shadow-md);
}
/* 상단 바 (배경 + 좌측 점 3개) */
.gdp .gd-thumb-frame::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 44px;
	background-color: var(--surface-100);
	background-image:
		radial-gradient(circle, var(--surface-300) 5px, transparent 5.5px),
		radial-gradient(circle, var(--surface-300) 5px, transparent 5.5px),
		radial-gradient(circle, var(--surface-300) 5px, transparent 5.5px);
	background-position: 16px center, 36px center, 56px center;
	background-repeat: no-repeat;
	border-bottom: 1px solid var(--surface-200);
}
/* URL pill (가운데) */
.gdp .gd-thumb-frame::after {
	content: 'oppadu.com/guide';
	position: absolute;
	top: 10px; left: 50%;
	transform: translateX(-50%);
	width: min(360px, 60%);
	box-sizing: border-box;
	padding: 4px 24px;
	background: var(--bg-subtle);
	border: 1px solid var(--surface-200);
	border-radius: var(--radius-full);
	font-size: var(--font-xs);
	color: var(--t-muted);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 상단바 우측 — Windows 최소화/최대화/종료 버튼 */
.gdp .gd-thumb-frame__win {
	position: absolute;
	top: 15px; right: 16px;
	width: 56px; height: 14px;
	color: var(--t-muted);
	z-index: 1;
	pointer-events: none;
}
.gdp .gd-thumb-frame__win svg { display: block; width: 100%; height: 100%; }
@media (max-width: 480px) {
	.gdp .gd-thumb-frame__win { width: 48px; }
}
/* 프레임 안 이미지 — 자체 라운드·그림자 없음(프레임이 책임짐). 16:9 박스 강제 */
.gdp .gd-thumb img {
	display: block; width: 100%; height: auto; /* height:auto — WP height 속성 무력화 후 aspect-ratio 가 박스를 결정 */
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: var(--bg-subtle);
	border: 0; border-radius: 0; box-shadow: none;
	margin: 0;
}

/* ─────────────────────────────────────────────
 * 크림 자료 카드 — 본문 무채색 규칙의 유일한 예외 면 (레슨 계승)
 * ───────────────────────────────────────────── */
.gdp .gd-cream {
	margin-top: var(--space-lg); background: var(--wk-cream); border-radius: 16px;
	padding: 30px 34px;
}
.gdp .gd-cream-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.gdp .gd-cream-title { font-size: 17px; font-weight: 700; color: var(--wk-text-strong); letter-spacing: -0.01em; }
.gdp .gd-cream-eyebrow {
	display: inline-flex; align-items: center; gap: 8px; flex: none;
	font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--wk-cream-num);
}
.gdp .gd-cream-eyebrow::before { content: ''; width: 28px; height: 1px; background: #D8D2C2; }
.gdp .gd-cream-desc { font-size: 13px; color: var(--wk-cream-mute); margin-bottom: 18px; }
.gdp .gd-cream-list { border-top: 1px solid var(--wk-cream-line); }
.gdp .gd-cream-row {
	display: flex; align-items: center; gap: 16px;
	padding: 15px 2px; border-bottom: 1px solid var(--wk-cream-line);
	color: inherit;
}
.gdp .gd-cream-row:last-child { border-bottom: 0; }
.gdp .gd-cream-num { font-family: var(--wk-mono); font-size: 13px; font-weight: 600; color: var(--wk-cream-num); flex: none; }
.gdp .gd-cream-main { min-width: 0; flex: 1; }
.gdp .gd-cream-name { display: block; font-size: 14px; font-weight: 700; color: var(--wk-text-strong); }
.gdp .gd-cream-sub { display: block; font-size: 12px; color: var(--wk-cream-mute); margin-top: 2px; }
.gdp .gd-cream-go { font-size: 12.5px; font-weight: 600; color: var(--wk-text-meta); flex: none; }
.gdp .gd-cream-row:hover .gd-cream-name { color: var(--wk-jade-700); }

/* 상단 배너 광고 */
.gdp .gd-adband { margin-top: var(--space-lg); text-align: center; }
.gdp .gd-adband > * { max-width: 100%; }

/* ─────────────────────────────────────────────
 * 본문 프로즈 (.wk-prose) — .lec-body 와 동일 스케일. 저장 HTML 은 순수 마크업.
 * ───────────────────────────────────────────── */
.gdp .wk-prose { font-size: 16px; line-height: 1.85; color: var(--wk-text); }
.gdp .wk-prose > :first-child { margin-top: 0 !important; }

.gdp .wk-prose p { font-size: 16px; line-height: 1.85; margin: 0 0 var(--space-md); text-wrap: pretty; }
.gdp .wk-prose strong, .gdp .wk-prose b { font-weight: 700; }

/* 링크 — 레거시 인라인 색(주황 span 등)이 링크 안에 박혀 있어 !important 로 정규화한다 */
.gdp .wk-prose a,
.gdp .wk-prose a * {
	color: var(--wk-jade-600) !important;
	font-weight: 600;
	text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px;
}
.gdp .wk-prose a:hover,
.gdp .wk-prose a:hover * { color: var(--wk-jade-700) !important; }

/* 헤딩 — 인라인 색 span(#808080 등 구 관례)을 디자인 색으로 통일 */
.gdp .wk-prose h2 *, .gdp .wk-prose h3 *, .gdp .wk-prose h4 *,
.gdp .wk-prose h5 *, .gdp .wk-prose h6 * { color: inherit !important; }

/* 형광펜 — 앰버 솔리드(이 페이지 스코프만, 전역 초록 밴드 셧다운) */
.gdp .wk-prose mark,
.gdp .wk-prose span.highlight-yellow {
	background: var(--wk-amber-hl);
	color: inherit;
	font-weight: 700;
	padding: 1px 3px;
	border-radius: 2px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* 인라인 코드칩 */
.gdp .wk-prose code {
	font-family: var(--wk-mono); font-size: 14px;
	background: var(--wk-chip); color: var(--wk-text);
	padding: 1px 6px; border-radius: 4px;
}

/* 헤딩 램프 — 레슨과 동일: h2 26/800 · 섹션(.wk-sec-h) 22/700 바+밑줄 · 부제 19 · h5 밑줄 강조 */
.gdp .wk-prose h2 {
	font-size: 26px; font-weight: 800; color: var(--wk-text-strong);
	line-height: 1.35; margin: var(--space-2xl) 0 var(--space-md);
	scroll-margin-top: 96px;
}
.gdp .wk-prose h3 {
	font-size: 19px; font-weight: 700; color: var(--wk-text-strong);
	letter-spacing: -0.01em; line-height: 1.45; margin: var(--space-lg) 0 var(--space-sm);
	scroll-margin-top: 96px;
}
.gdp .wk-prose h4 { font-size: 17px; font-weight: 700; color: var(--wk-text-strong); margin: var(--space-lg) 0 var(--space-sm); scroll-margin-top: 96px; }
/* H5 — 레슨 관례: 진한 밑줄 인라인 강조 (좌우 패딩으로 밑줄이 텍스트보다 살짝 길게) */
.gdp .wk-prose h5 {
	display: inline-block;
	font-size: 19px; font-weight: 700; color: var(--wk-text-strong);
	line-height: 1.45; margin: var(--space-md) 0;
	padding: 0 6px 3px 6px;
	border-bottom: 3px solid var(--wk-jade-700);
}
.gdp .wk-prose h6 { font-size: 15px; font-weight: 700; color: var(--wk-text-sub); margin: 18px 0 6px; }

/* 섹션 제목 — 레슨 h3 문법 그대로: 좌측 5px 제이드 바 + 연녹 밑줄.
   섹션 레벨은 파서가 판별해 태그 무관 .wk-sec-h 를 붙인다(레거시 = h3 섹션 다수). */
.gdp .wk-prose .wk-sec-h {
	position: relative;
	font-size: 22px; font-weight: 700; color: var(--wk-text-strong);
	letter-spacing: -0.01em; line-height: 1.4;
	margin: var(--space-xl) 0 var(--space-md);
	padding: var(--space-md) 0 var(--space-sm) var(--space-lg);
	border-bottom: 2px solid var(--primary-light);
	border-left: 0;
	scroll-margin-top: 96px;
}
.gdp .wk-prose .wk-sec-h::before {
	content: '';
	position: absolute;
	left: 0; top: 48%;
	transform: translateY(-30%);
	width: 5px; height: 55%;
	background: var(--wk-jade-500);
	border-radius: 2px;
}
.gdp .wk-prose .wk-title-dup { display: none; } /* 본문 첫 줄 제목 반복(구 관례) — 센터 H1 과 중복 */

/* 제목 직후 첫 본문 요소에 추가 호흡감 (레슨 동일) */
.gdp .wk-prose .wk-sec-h + p,
.gdp .wk-prose h5 + p { margin-top: var(--space-md); }
.gdp .wk-prose .wk-sec-h + img, .gdp .wk-prose .wk-sec-h + figure,
.gdp .wk-prose h5 + img, .gdp .wk-prose h5 + figure { margin-top: var(--space-sm); }

/* 목록 ul — 레슨 문법: 연녹 좌측 라인 + 제이드 도트 */
.gdp .wk-prose ul {
	list-style: none;
	margin: var(--space-xl) 0;
	padding-left: var(--space-xl);
	border-left: 3px solid var(--primary-light);
}
.gdp .wk-prose ul li {
	position: relative;
	margin-bottom: var(--space-md);
	padding-left: var(--space-lg);
	font-size: 16px; line-height: 1.75;
}
.gdp .wk-prose ul li:last-child { margin-bottom: 0; }
.gdp .wk-prose ul li::before {
	content: '';
	position: absolute; left: -2px; top: 10px;
	width: 8px; height: 8px;
	background: var(--wk-jade-500);
	border-radius: 9999px;
	box-shadow: 0 0 0 3px var(--bg-subtle);
}
.gdp .wk-prose ul ul {
	margin: var(--space-sm) 0 0;
	border-left: 2px solid var(--gray-200);
}
.gdp .wk-prose ul ul li { margin-bottom: var(--space-sm); padding-left: var(--space-md); }
.gdp .wk-prose ul ul li::before {
	background: transparent;
	border: 2px solid var(--wk-jade-500);
	width: 5px; height: 5px;
	left: -2px; top: 11px;
	box-shadow: none;
}

/* 스텝 ol — 레슨 문법: 36px 제이드 원 배지 + 좌측 가이드 라인. 본문 직계 ol 만. */
.gdp .wk-prose > ol {
	counter-reset: gd-step;
	list-style: none;
	position: relative;
	margin: var(--space-xl) 0;
	padding: 0 0 0 56px;
}
.gdp .wk-prose > ol::before {
	content: '';
	position: absolute;
	left: 17px; top: 22px; bottom: 22px;
	width: 2px;
	background: var(--primary-light);
	z-index: 0;
}
.gdp .wk-prose > ol > li {
	counter-increment: gd-step;
	position: relative;
	margin: 0 0 var(--space-lg);
	padding: 0 0 var(--space-sm);
	font-size: 16px; line-height: 1.75;
}
.gdp .wk-prose > ol > li:last-child { margin-bottom: 0; }
.gdp .wk-prose > ol > li::before {
	content: counter(gd-step);
	position: absolute;
	left: -56px; top: -4px;
	width: 36px; height: 36px;
	background: var(--wk-jade-500);
	color: #fff;
	border-radius: 9999px;
	font-size: 14px; font-weight: 700;
	line-height: 36px; text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	z-index: 1;
}
/* 중첩 ol — 데시멀 제이드 숫자 (레슨 동일) */
.gdp .wk-prose > ol ol {
	counter-reset: gd-substep;
	list-style: none;
	margin: var(--space-sm) 0 0;
	padding-left: var(--space-xl);
}
.gdp .wk-prose > ol ol > li {
	counter-increment: gd-substep;
	position: relative;
	padding-left: var(--space-md);
	margin-bottom: 4px;
	font-size: 15px;
}
.gdp .wk-prose > ol ol > li::before {
	content: counter(gd-substep) '.';
	position: absolute; left: 0; top: 0;
	width: auto; height: auto;
	background: transparent;
	color: var(--wk-jade-600);
	font-size: 15px; font-weight: 700;
	line-height: inherit; text-align: left;
	box-shadow: none;
}
.gdp .wk-prose > ol ol::before { display: none; }

/* 레거시 실습파일 미니 표 — linked_files 이관 후 크림 자료 카드가 대체 (파서가 클래스 부여) */
.gdp .wk-cmp--legacyfile { display: none; }

/* 표 — 렌더 래퍼 .wk-cmp. 레슨과 동일 스케일(15px·12×16 셀·헤더 14/600) + 인라인 배경·색 정규화. */
.gdp .wk-cmp {
	border: 1px solid var(--gray-200); border-radius: var(--radius-nm);
	overflow-x: auto; margin: var(--space-xl) 0 var(--space-2xl);
	box-shadow: var(--shadow-sm); background: #FFFFFF;
	-webkit-overflow-scrolling: touch;
}
.gdp .wk-cmp table {
	width: 100%; min-width: 560px;
	border-collapse: collapse; margin: 0;
	font-size: 15px; line-height: 1.65; color: var(--wk-text);
	height: auto !important;
}
.gdp .wk-cmp th, .gdp .wk-cmp td {
	padding: 12px 16px; text-align: left; vertical-align: top;
	border: 0; border-bottom: 1px solid var(--gray-200);
	background: #FFFFFF !important; /* 레거시 인라인 배경 정규화 */
	color: var(--wk-text) !important; /* 레거시 인라인 글자색 정규화 (레슨 동일) */
	width: auto !important; height: auto !important;
	word-break: keep-all; overflow-wrap: break-word;
}
.gdp .wk-cmp tr:last-child th, .gdp .wk-cmp tr:last-child td { border-bottom: none; }
/* 머리글: thead th, 또는 파서가 thead 없음을 표시한 표의 첫 행 */
.gdp .wk-cmp thead th, .gdp .wk-cmp thead td,
.gdp .wk-cmp--headless tr:first-child td {
	background: var(--bg-subtle) !important;
	color: var(--wk-text) !important;
	font-size: 14px; font-weight: 600;
	letter-spacing: -0.1px;
	border-bottom: 2px solid var(--gray-200);
}
/* zebra — 헤더 제외, 홀수 본문 행 미세 배경 (레슨 동일) */
.gdp .wk-cmp table > tbody > tr:nth-child(2n+1):not(:first-child) > td {
	background: rgba(0, 0, 0, 0.015) !important;
}
.gdp .wk-cmp table > tbody > tr:not(:first-child):hover > td {
	background: var(--primary-light) !important;
	transition: background-color var(--transition-fast);
}
.gdp .wk-cmp tbody td strong, .gdp .wk-cmp tbody td b { color: var(--wk-jade-600); font-weight: 700; } /* 결론 셀 계약 */
.gdp .wk-cmp td { white-space: normal; }

/* 이미지 + 캡션 — 레슨 문법: 그림자 + 10px 라운드, 좌측 정렬 */
.gdp .wk-prose img {
	max-width: 100%; max-height: 500px; height: auto;
	object-fit: contain;
	border: 0; border-radius: var(--radius-nm);
	box-shadow: var(--shadow-md);
	margin: var(--space-md) 0;
	display: block;
}
.gdp .wk-prose figure, .gdp .wk-prose .wp-caption {
	width: auto !important;
	margin: var(--space-lg) 0; max-width: 100% !important;
	text-align: left;
}
.gdp .wk-prose figure img, .gdp .wk-prose .wp-caption img { display: block; margin: 0; }
.gdp .wk-prose figcaption, .gdp .wk-prose .wp-caption-text {
	font-size: 13px; line-height: 1.5; color: var(--wk-text-mute);
	text-align: left; margin: var(--space-sm) 0 0;
}

/* 코드·수식 블록 (B9) — 다크. 전역 pre 스타일 오버라이드. */
.gdp .wk-prose pre {
	background: var(--wk-code-body); color: var(--wk-code-text);
	font-family: var(--wk-mono); font-size: 13px; line-height: 1.75;
	padding: 14px 16px; margin: 0 0 20px;
	border: 1px solid var(--wk-code-head); border-radius: 10px;
	overflow-x: auto; white-space: pre-wrap;
}
.gdp .wk-prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* 콜아웃 3종 (B8) — 흰 면 + hairline, 종류는 아이콘·라벨 색으로만 */
.gdp .wk-callout {
	display: flex; gap: 11px; align-items: flex-start;
	background: #FFFFFF; border: 1px solid var(--wk-line); border-radius: 10px;
	padding: 14px 16px; margin: 0 0 16px;
}
.gdp .wk-callout > svg { flex: none; margin-top: 3px; }
.gdp .wk-callout-body { min-width: 0; }
.gdp .wk-callout-label {
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; margin-bottom: 4px;
	display: flex; align-items: center; gap: 7px;
}
.gdp .wk-callout--tip  .wk-callout-label { color: var(--wk-jade-600); }
.gdp .wk-callout--warn .wk-callout-label { color: var(--wk-warn); }
.gdp .wk-callout--ver  .wk-callout-label { color: var(--wk-text-meta); }
.gdp .wk-callout-chip {
	font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 2px;
	background: #F1F1EE; color: var(--wk-text-meta);
}
.gdp .wk-callout p { font-size: 15px; line-height: 1.75; margin: 0; color: var(--wk-text); }

/* 메뉴 경로 (B5) — 최종 단계만 짙게 */
.gdp .wk-path { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.gdp .wk-path-chip {
	display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
	background: var(--wk-chip); border: 1px solid var(--wk-line); border-radius: 6px;
	font-size: 13.5px; font-weight: 600; color: var(--wk-text-sub);
}
.gdp .wk-path-chip--last { background: var(--wk-text-strong); border-color: var(--wk-text-strong); color: #FFFFFF; }
.gdp .wk-path-arrow { color: var(--wk-text-faint); }

/* 수치 스탯 행 (B7) */
.gdp .wk-stats {
	display: grid; grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--wk-line); border-radius: 10px; overflow: hidden;
	margin: 0 0 16px;
}
.gdp .wk-stats > div { padding: 18px 20px 16px; }
.gdp .wk-stats > div + div { border-left: 1px solid var(--wk-line-soft); }
.gdp .wk-stat-num {
	font-size: 26px; font-weight: 700; color: var(--wk-text-strong);
	letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.gdp .wk-stat-cap { font-size: 12px; color: var(--wk-text-meta); margin-top: 3px; }
.gdp .wk-stat-delta { font-size: 11px; font-weight: 600; color: var(--wk-jade-600); margin-top: 5px; font-variant-numeric: tabular-nums; }
.gdp .wk-stat-delta--mute { color: var(--wk-text-mute); }

/* ─────────────────────────────────────────────
 * 문서 끝 — 관련 문서 · 이전/다음 (B12)
 * ───────────────────────────────────────────── */
.gdp .gd-endnav { border-top: 1px solid var(--wk-line); margin-top: var(--space-2xl); padding-top: 18px; }
.gdp .gd-endnav-label { font-size: 12px; font-weight: 700; color: var(--wk-text-mute); margin-bottom: 9px; }
.gdp .gd-rel { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.gdp .gd-rel-chip {
	font-size: 12.5px; font-weight: 500; color: var(--wk-text-sub);
	border: 1px solid var(--wk-line); border-radius: 6px;
	padding: 6px 12px; background: #FFFFFF;
}
.gdp .gd-rel-chip:hover { background: var(--wk-chip); color: var(--wk-text-strong); }
.gdp .gd-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gdp .gd-pn-card {
	border: 1px solid var(--wk-line); border-radius: 8px; padding: 12px 14px;
	display: flex; flex-direction: column; gap: 4px; background: #FFFFFF;
	min-width: 0;
}
.gdp .gd-pn-card:hover { background: var(--wk-hover); }
.gdp .gd-pn-card--next { align-items: flex-end; text-align: right; }
.gdp .gd-pn-dir { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--wk-text-mute); }
.gdp .gd-pn-title { font-size: 14px; font-weight: 500; color: var(--wk-text); }

/* 댓글 진입 */
.gdp .gd-comments { scroll-margin-top: 96px; margin-top: var(--space-2xl); }

/* ─────────────────────────────────────────────
 * 우레일 — 문서 목차 카드 + 광고 (sticky, 레슨 사이드바 340 폭)
 * ───────────────────────────────────────────── */
.gdp .wk-rail { position: relative; min-width: 0; }
.gdp .gd-rail-in { position: sticky; top: 76px; }

.gdp .gd-toc { border: 1px solid var(--wk-line); border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.gdp .gd-toc-head {
	display: flex; align-items: center; gap: 8px;
	padding: 12px 16px; background: var(--wk-surface); border-bottom: 1px solid var(--wk-line-soft);
}
.gdp .gd-toc-title { font-size: 14px; font-weight: 700; color: var(--wk-text-strong); }
.gdp .gd-toc-list { padding: 8px 8px 10px; }
.gdp .gd-toca {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 9px 8px; border-radius: 8px;
	font-size: 13.5px; color: var(--wk-text-meta); line-height: 1.45;
}
.gdp .gd-toca:hover { background: var(--wk-chip); color: var(--wk-text-meta); }
.gdp .gd-tocn {
	flex: none; width: 22px; height: 22px; border-radius: 9999px;
	background: var(--wk-badge); color: var(--wk-text-meta);
	font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
	display: flex; align-items: center; justify-content: center;
	transition: background 150ms ease, color 150ms ease;
}
.gdp .gd-toca.is-on { color: var(--wk-text-strong); font-weight: 600; }
.gdp .gd-toca.is-on .gd-tocn { background: var(--wk-jade-500); color: #FFFFFF; }

.gdp .gd-rail-ad { margin: var(--space-md) auto 0; width: 300px; max-width: 100%; }
.gdp .gd-rail-ad > * { max-width: 100%; }

/* 모바일 축소 목차 (본문 상단) */
.gdp .wk-ltoc { border: 1px solid var(--wk-line); border-radius: 10px; padding: 13px 16px; margin-bottom: var(--space-lg); }
.gdp .gd-ltoc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--wk-text-mute); margin-bottom: 8px; }
.gdp .gd-ltoc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.gdp .gd-ltoc-list a { font-size: 14px; color: var(--wk-text-sub); }
.gdp .gd-ltoc-list a:hover { color: var(--wk-text-strong); }
.gdp .gd-ltoc-num { color: var(--wk-text-faint); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }

/* ─────────────────────────────────────────────
 * 반응형 — 레슨과 동일 분기점 (1024 사이드바 접힘 / 768 표 / 640 모바일)
 * ───────────────────────────────────────────── */
@media (max-width: 1024px) {
	.gdp .wk-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: var(--space-xl) var(--px) var(--space-2xl);
	}
	.gdp .wk-rail { display: none; }
	.gdp .wk-ltoc { display: block; }
	/* 스텝 배지 32px 축소 (레슨 동일) */
	.gdp .wk-prose > ol { padding-left: 50px; }
	.gdp .wk-prose > ol::before { left: 15px; top: 20px; bottom: 20px; }
	.gdp .wk-prose > ol > li::before { left: -50px; width: 32px; height: 32px; font-size: 13px; line-height: 32px; }
}

@media (max-width: 768px) {
	.gdp .wk-cmp table { font-size: 14px; }
	.gdp .wk-cmp th, .gdp .wk-cmp td { padding: 10px 12px; }
}

@media (max-width: 640px) {
	.gdp .wk-lead { padding: var(--space-xl) var(--space-lg) var(--space-sm); }
	.gdp .gd-crumb { font-size: 12px; }
	.gdp .gd-h1 { font-size: 26px; }
	.gdp .gd-divider { margin-top: var(--space-md); }
	.gdp .wk-intro { margin-top: var(--space-lg); padding: 0 var(--space-lg); }
	.gdp .gd-lede { font-size: 16px; }
	.gdp .gd-lede-sub { font-size: 14.5px; }
	.gdp .wk-band { padding: 0 var(--space-lg); }
	.gdp .wk-body { padding: var(--space-lg) var(--space-lg) var(--space-2xl); }
	.gdp .gd-cream { padding: 22px 20px; border-radius: 12px; }
	.gdp .wk-stats { grid-template-columns: 1fr; }
	.gdp .wk-stats > div + div { border-left: 0; border-top: 1px solid var(--wk-line-soft); }
	.gdp .gd-pn { grid-template-columns: 1fr; }
	.gdp .gd-ltoc-list { grid-template-columns: 1fr; }
	.gdp .gd-meta { gap: 10px 14px; }
}

/* 어드민 바 오프셋 */
.admin-bar .gdp .gd-rail-in { top: 108px; }
.admin-bar .gdp .wk-prose h2,
.admin-bar .gdp .wk-prose h3,
.admin-bar .gdp .wk-prose h4,
.admin-bar .gdp .wk-prose .wk-sec-h,
.admin-bar .gdp .gd-comments { scroll-margin-top: 128px; }

/* 모션 억제 */
@media (prefers-reduced-motion: reduce) {
	.gdp *, .gdp *::before, .gdp *::after { transition: none !important; }
}