/**
 * tc-geo-blog Standalone Post Template CSS
 *
 * standalone 전용 — 이 파일은 차일드 테마가 없을 때만 로드된다. 따라서 unlayered 로 둔다.
 *   (@layer 로 감싸면 부모 테마(hello-elementor 등)의 unlayered CSS 에 밀려 레이아웃·스타일이 깨진다.
 *    CSS Cascade Layers 규칙: unlayered > layered. standalone 에선 플러그인이 블로그 마스터여야 한다.)
 * 격리는 `.tcgeo-root` 스코프로 보장 — post 본문 영역 외(헤더/푸터 등)는 침범하지 않는다.
 *
 * 원본: hello-elementor-child/assets/css/global.css + single-post.css
 */

/* =============================================================================
   1. 디자인 토큰
   ============================================================================= */

:root {
	--color-primary:        #0064FF;
	--color-bg-primary:     #FFFFFF;
	--font-base:            "Pretendard", -apple-system, BlinkMacSystemFont,
	                        "Apple SD Gothic Neo", system-ui, sans-serif;

	--color-primary-hover:       color-mix(in srgb, var(--color-primary) 80%, #000);
	--color-primary-light:       color-mix(in srgb, var(--color-primary)  9%, #fff);
	--color-primary-light-hover: color-mix(in srgb, var(--color-primary) 17%, #fff);
	--color-primary-bg:          color-mix(in srgb, var(--color-primary)  6%, #fff);
	--color-primary-soft:        color-mix(in srgb, var(--color-primary)  6%, #fff);
	--color-primary-softer:      color-mix(in srgb, var(--color-primary)  3%, #fff);

	--color-code:           #D6336C;
	--color-text-primary:   #191F28;
	--color-text-strong:    #333D4B;
	--color-text-secondary: #4E5968;
	--color-text-tertiary:  #8B95A1;
	--color-text-disabled:  #B0B8C1;
	--color-bg-secondary:   #F8F9FA;
	--color-bg-tertiary:    #F2F4F6;
	--color-border:         #E5E8EB;
	--color-border-light:   #F2F4F6;
	--color-border-dark:    #D1D6DB;
	--color-success:        #00C471;
	--color-warning:        #FF9500;
	--color-error:          #F04452;
	--color-info:           #0064FF;
	--color-dark-bg:        #191F28;
	--color-dark-surface:   #141920;
	--color-dark-text:      #FFFFFF;
	--color-dark-muted:     #8B95A1;

	--font-family:          var(--font-base);
	--font-mono:            "SF Mono", "Fira Code", "Consolas", monospace;

	--text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 16px;
	--text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px;

	--font-regular: 400; --font-medium: 500; --font-semibold: 600;
	--font-bold: 700; --font-extrabold: 800;

	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
	--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
	--space-12: 48px; --space-16: 64px; --space-20: 80px;

	--radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
	--radius-xl: 16px; --radius-full: 9999px;

	--shadow-sm: 0 1px 2px rgba(0,0,0,.04);
	--shadow-md: 0 2px 8px rgba(0,0,0,.08);
	--shadow-lg: 0 4px 16px rgba(0,0,0,.12);
	--shadow-xl: 0 8px 24px rgba(0,0,0,.16);

	--transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease;

	--z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-overlay: 40; --z-modal: 50;
}

/* =============================================================================
   2. Scoped 리셋
   ============================================================================= */

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

.tcgeo-root {
	font-family: var(--font-family);
	color: var(--color-text-primary);
	line-height: 1.8;
}

body.single-post { background: var(--color-bg-secondary); }

/* =============================================================================
   3. 3-column 레이아웃
   ============================================================================= */

.tcgeo-root .hc-single-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 760px) 240px;
	gap: 40px;
	justify-content: center;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 24px 80px;
	box-sizing: border-box;
}

.tcgeo-root .hc-single-layout > .hc-toc-sidebar   { grid-column: 1; }
.tcgeo-root .hc-single-layout > .hc-single-wrap    { grid-column: 2; }
.tcgeo-root .hc-single-layout > .hc-promo-sidebar  { grid-column: 3; }

.tcgeo-root .hc-toc-sidebar,
.tcgeo-root .hc-promo-sidebar {
	overflow: hidden;
	min-width: 0;
}

.tcgeo-root .hc-single-wrap {
	min-width: 0;
	padding: 0 20px;
	box-sizing: border-box;
}

.tcgeo-root .hc-single {
	font-family: var(--font-base);
	color: var(--color-text-primary);
	line-height: 1.8;
}

/* =============================================================================
   4. 좌측 TOC
   ============================================================================= */

.tcgeo-root .hc-toc-sidebar {
	position: sticky;
	top: 80px;
	align-self: start;
	padding: 0;
	width: 220px;
	box-sizing: border-box;
}

.tcgeo-root .hc-toc {
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 20px 22px;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.tcgeo-root .hc-toc-heading {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: .5px;
	margin: 0 0 12px;
	padding: 0;
}

.tcgeo-root .hc-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcgeo-root .hc-toc-list li { margin-bottom: 6px; }

.tcgeo-root .hc-toc-link {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-tertiary);
	text-decoration: none;
	padding: 4px 0 4px 12px;
	border-left: 2px solid transparent;
	transition: all .2s;
	line-height: 1.4;
	word-break: keep-all;
}

.tcgeo-root .hc-toc-link:hover {
	color: var(--color-text-primary);
	background: var(--color-primary-light);
}

.tcgeo-root .hc-toc-link.is-active {
	color: var(--color-primary);
	border-left-color: var(--color-primary);
	background: var(--color-primary-light);
}

/* =============================================================================
   5. 우측 CTA 위젯
   ============================================================================= */

.tcgeo-root .hc-promo-sidebar {
	position: sticky;
	top: 80px;
	align-self: start;
	padding: 0;
	width: 240px;
	box-sizing: border-box;
}

.tcgeo-root .hc-promo-widget {
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	overflow: hidden;
	text-align: center;
}

.tcgeo-root .hc-promo-thumb {
	margin: 16px 16px 0;
	overflow: hidden;
	text-align: center;
}

.tcgeo-root .hc-promo-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.tcgeo-root .hc-promo-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 16px 16px 12px;
	line-height: 1.4;
	word-break: keep-all;
}

.tcgeo-root .hc-promo-btn {
	display: block;
	margin: 0 16px 16px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-bg-primary);
	background: var(--color-primary);
	border-radius: 8px;
	text-decoration: none;
	transition: all .2s;
}

.tcgeo-root .hc-promo-btn:hover {
	background: var(--color-dark-bg);
	color: var(--color-bg-primary);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* =============================================================================
   6. 브레드크럼
   ============================================================================= */

.tcgeo-root .hc-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-tertiary);
	word-break: keep-all;
}

.tcgeo-root .hc-breadcrumb__item {
	color: var(--color-text-tertiary);
	text-decoration: none;
	transition: color .2s;
}

.tcgeo-root .hc-breadcrumb__item:hover { color: var(--color-primary); }
.tcgeo-root .hc-breadcrumb__sep { color: var(--color-border-dark); font-size: 12px; }
.tcgeo-root .hc-breadcrumb__current { color: var(--color-text-secondary); font-weight: 500; }

/* =============================================================================
   7. 메타 (카테고리 + 날짜)
   ============================================================================= */

.tcgeo-root .hc-single-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.tcgeo-root .hc-single-cat {
	display: inline-block;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary);
	background: var(--color-primary-light);
	border-radius: 20px;
	text-decoration: none;
	transition: background .2s;
}

.tcgeo-root .hc-single-cat:hover {
	background: var(--color-primary-light-hover);
	color: var(--color-primary);
}

.tcgeo-root .hc-single-date {
	font-size: 13px;
	color: var(--color-text-tertiary);
}

/* =============================================================================
   8. 메타카드
   ============================================================================= */

.tcgeo-root .hc-meta-card {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 18px 0;
	margin: 0 0 28px;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.tcgeo-root .hc-meta-card__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex: 1 1 160px;
	min-width: 0;
}

.tcgeo-root .hc-meta-card__icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; }

.tcgeo-root .hc-meta-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tcgeo-root .hc-meta-card__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-tertiary);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.tcgeo-root .hc-meta-card__value {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-primary);
	line-height: 1.45;
}

.tcgeo-root .hc-meta-card__sub {
	font-size: 12px;
	color: var(--color-text-tertiary);
	line-height: 1.45;
}

/* =============================================================================
   9. 제목 + 리드 + 핵심답변
   ============================================================================= */

.tcgeo-root .hc-single-title {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--color-text-primary);
	margin: 0 0 28px;
	letter-spacing: -.5px;
	word-break: keep-all;
}

.tcgeo-root .hc-lede {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-text-secondary);
	margin: 0 0 24px;
	letter-spacing: -.1px;
	word-break: keep-all;
}

.tcgeo-root .hc-key-answer {
	border-left: 3px solid var(--color-primary);
	padding: 6px 0 6px 18px;
	margin: 0 0 28px;
}

.tcgeo-root .hc-key-answer p {
	font-size: 17px;
	font-weight: 600;
	color: var(--color-text-primary);
	line-height: 1.65;
	margin: 0;
	letter-spacing: -.1px;
}

/* =============================================================================
   10. TL;DR
   ============================================================================= */

.tcgeo-root .hc-tldr {
	background: var(--color-primary-light);
	border-radius: 14px;
	padding: 26px 28px 22px;
	margin-bottom: 36px;
}

.tcgeo-root .hc-tldr-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary);
	margin: 0 0 14px;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: .18em;
}

.tcgeo-root .hc-tldr-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcgeo-root .hc-tldr-list li {
	position: relative;
	padding: 8px 0 8px 26px;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text-primary);
	line-height: 1.6;
	border-bottom: 1px dashed color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.tcgeo-root .hc-tldr-list li:last-child { border-bottom: none; }

.tcgeo-root .hc-tldr-list li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: 8px;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.6;
}

.tcgeo-root .hc-tldr-list li b { color: var(--color-primary); font-weight: 700; }

/* =============================================================================
   11. 본문 타이포그래피
   ============================================================================= */

.tcgeo-root .hc-single-content { margin-bottom: 48px; }

.tcgeo-root .hc-single-content h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 40px 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-bg-tertiary);
}

.tcgeo-root .hc-single-content h3 {
	font-size: 19px;
	font-weight: 600;
	color: var(--color-text-strong);
	margin: 32px 0 12px;
}

.tcgeo-root .hc-single-content p {
	font-size: 16px;
	color: var(--color-text-secondary);
	margin: 0 0 16px;
}

.tcgeo-root .hc-single-content ul,
.tcgeo-root .hc-single-content ol {
	padding-left: 24px;
	margin: 0 0 20px;
}

.tcgeo-root .hc-single-content li {
	font-size: 15px;
	color: var(--color-text-secondary);
	margin-bottom: 6px;
	line-height: 1.7;
}

.tcgeo-root .hc-single-content code {
	background: var(--color-bg-tertiary);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 14px;
	color: var(--color-code);
}

.tcgeo-root .hc-single-content blockquote {
	border-left: 3px solid var(--color-primary);
	background: var(--color-bg-secondary);
	margin: 20px 0;
	padding: 16px 20px;
	border-radius: 0 8px 8px 0;
}

.tcgeo-root .hc-single-content blockquote p {
	color: var(--color-text-strong);
	font-style: italic;
}

/* =============================================================================
   12. 본문 표
   ============================================================================= */

.tcgeo-root .hc-single-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 22px 0;
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	overflow: hidden;
}

.tcgeo-root .hc-single-content thead th {
	background: var(--color-dark-bg);
	color: var(--color-dark-text);
	text-align: left;
	padding: 14px 16px;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .02em;
}

.tcgeo-root .hc-single-content tbody td {
	padding: 14px 16px;
	border-top: 1px solid var(--color-border);
	vertical-align: top;
	color: var(--color-text-strong);
	line-height: 1.65;
}

.tcgeo-root .hc-single-content tbody tr:nth-child(even) td {
	background: var(--color-bg-secondary);
}

.tcgeo-root .hc-single-content tbody td:first-child {
	font-weight: 700;
	color: var(--color-text-primary);
	width: 38%;
}

.tcgeo-root .hc-single-content tbody td b,
.tcgeo-root .hc-single-content tbody td strong {
	color: var(--color-text-primary);
	font-weight: 700;
}

/* =============================================================================
   13. 관련글
   ============================================================================= */

.tcgeo-root .hc-related {
	margin-bottom: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--color-border);
}

.tcgeo-root .hc-related-title,
.tcgeo-root .hc-glossary-label {
	display: inline-block;
	font-size: 24px;
	font-weight: 800;
	color: var(--color-text-primary);
	margin: 0 0 16px;
	padding: 0 0 12px;
	border-bottom: 2px solid var(--color-text-primary);
	text-transform: none;
	letter-spacing: normal;
}

.tcgeo-root .hc-related-grid,
.tcgeo-root .tc-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.tcgeo-root .hc-related-card,
.tcgeo-root .tc-related-card {
	display: block;
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	transition: all .2s;
}

.tcgeo-root .hc-related-card:hover,
.tcgeo-root .tc-related-card:hover {
	border-color: var(--color-primary);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 10%, transparent);
	transform: translateY(-2px);
}

.tcgeo-root .hc-related-thumb,
.tcgeo-root .tc-related-card__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.tcgeo-root .hc-related-thumb img,
.tcgeo-root .tc-related-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s;
}

.tcgeo-root .hc-related-card:hover .hc-related-thumb img,
.tcgeo-root .tc-related-card:hover .tc-related-card__thumb img {
	transform: scale(1.05);
}

.tcgeo-root .hc-related-info,
.tcgeo-root .tc-related-card__info { padding: 14px 16px; }

.tcgeo-root .hc-related-card-title,
.tcgeo-root .tc-related-card__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-strong);
	margin: 0 0 6px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tcgeo-root .hc-related-date,
.tcgeo-root .tc-related-card__date {
	font-size: 12px;
	color: var(--color-text-tertiary);
}

/* =============================================================================
   14. 용어 정리
   ============================================================================= */

.tcgeo-root .hc-glossary { margin-bottom: 32px; }

.tcgeo-root .hc-glossary-item {
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 18px 22px;
	margin-bottom: 10px;
	transition: border-color .2s;
}

.tcgeo-root .hc-glossary-item:hover { border-color: var(--color-primary-light-hover); }
.tcgeo-root .hc-glossary-item:last-child { margin-bottom: 0; }

.tcgeo-root .hc-glossary-term {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text-primary);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.tcgeo-root .hc-glossary-term::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--color-primary);
	border-radius: 50%;
	flex-shrink: 0;
}

.tcgeo-root .hc-glossary-row { display: flex; gap: 10px; margin-bottom: 6px; line-height: 1.75; }
.tcgeo-root .hc-glossary-row:last-child { margin-bottom: 0; }

.tcgeo-root .hc-glossary-row-label {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-tertiary);
	text-transform: uppercase;
	letter-spacing: .04em;
	padding-top: 2px;
	min-width: 62px;
}

.tcgeo-root .hc-glossary-row-text { font-size: 14px; color: var(--color-text-secondary); }

.tcgeo-root .hc-glossary-easy-row .hc-glossary-row-label { color: var(--color-primary); }
.tcgeo-root .hc-glossary-easy-row .hc-glossary-row-text { color: var(--color-text-strong); font-weight: 500; }

/* =============================================================================
   15. 태그
   ============================================================================= */

.tcgeo-root .hc-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 40px 0 16px;
}

.tcgeo-root .hc-post-tag {
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-primary);
	background: var(--color-primary-light);
	padding: 6px 12px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

.tcgeo-root .hc-post-tag:hover,
.tcgeo-root .hc-post-tag:focus {
	background: var(--color-primary);
	color: var(--color-bg-primary);
}

/* =============================================================================
   16. CTA
   ============================================================================= */

.tcgeo-root .hc-cta {
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-radius: 12px;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tcgeo-root .hc-cta-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text-secondary);
	margin: 0 0 12px;
	letter-spacing: .3px;
}

.tcgeo-root .hc-cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: var(--color-bg-primary);
	border-radius: 8px;
	margin-bottom: 6px;
	transition: box-shadow .2s;
}

.tcgeo-root .hc-cta-row:last-child { margin-bottom: 0; }
.tcgeo-root .hc-cta-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.tcgeo-root .hc-cta-text {
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text-strong);
}

.tcgeo-root .hc-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-primary);
	background: none;
	border: none;
	border-radius: 0;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s;
}

.tcgeo-root .hc-cta-btn svg { width: 14px; height: 14px; transition: transform .2s; }

.tcgeo-root .hc-cta-btn:hover {
	color: var(--color-primary-hover);
	background: none;
	transform: none;
	box-shadow: none;
}

.tcgeo-root .hc-cta-btn:hover svg { transform: translateX(2px); }

/* =============================================================================
   17. tc-* 블록 (tc-kicker, tc-bold-quote, tc-qb, tc-stats, tc-scene, tc-ck, tc-faq 등)
   ============================================================================= */

.tcgeo-root .tc-kicker {
	display: inline-block; font-size: 11px; font-weight: 700;
	color: var(--color-text-tertiary); letter-spacing: .18em; text-transform: uppercase;
	margin-bottom: 8px; padding-left: 10px; border-left: 2px solid var(--color-border);
}

.tcgeo-root .hc-single-content p:has(> .tc-kicker:only-child) { margin: 28px 0 0; }
.tcgeo-root .hc-single-content p:has(> .tc-kicker:only-child) + h2 { margin-top: 4px; }

.tcgeo-root .tc-bold-quote {
	display: block; font-size: 18px; font-weight: 800; color: var(--color-text-primary);
	line-height: 1.6; padding: 18px 22px; background: var(--color-primary-light);
	border-radius: 12px; margin: 28px 0;
}

.tcgeo-root .tc-divider { border: 0; border-top: 1px solid var(--color-border); margin: 40px 0; }

/* tc-qb */
.tcgeo-root .tc-qb {
	background: var(--color-bg-secondary); border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-primary); border-radius: 12px;
	padding: 24px 26px; margin: 28px 0;
}
.tcgeo-root .tc-qb__label {
	display: inline-block; font-size: 10px; font-weight: 700; color: var(--color-primary);
	background: var(--color-primary-light); padding: 4px 10px; border-radius: 999px;
	text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px;
}
.tcgeo-root .tc-qb__conc {
	display: block; font-size: 17px; font-weight: 800; color: var(--color-text-primary);
	line-height: 1.55; margin-bottom: 14px;
}
.tcgeo-root .tc-qb__row { display: flex; gap: 10px; margin-bottom: 6px; line-height: 1.7; }
.tcgeo-root .tc-qb__row:last-child { margin-bottom: 0; }
.tcgeo-root .tc-qb__key {
	flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--color-primary);
	text-transform: uppercase; letter-spacing: .05em; padding-top: 3px; min-width: 44px;
}
.tcgeo-root .tc-qb__val { font-size: 14px; color: var(--color-text-secondary); }
.tcgeo-root .tc-qb__warn .tc-qb__key { color: var(--color-text-primary); }

/* tc-stats */
.tcgeo-root .tc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 28px 0; }
.tcgeo-root .tc-stat {
	background: var(--color-bg-secondary); border: 1px solid var(--color-border);
	border-radius: 12px; padding: 24px 18px; text-align: center;
}
.tcgeo-root .tc-stat__num {
	display: block; font-size: 32px; font-weight: 800; color: var(--color-primary);
	line-height: 1.1; margin-bottom: 6px; letter-spacing: -.02em;
}
.tcgeo-root .tc-stat__label { display: block; font-size: 13px; font-weight: 500; color: var(--color-text-tertiary); line-height: 1.4; }

/* tc-scene */
.tcgeo-root .tc-scene {
	background: var(--color-bg-secondary); border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-primary); border-radius: 12px;
	padding: 22px 26px; margin: 28px 0;
	font-size: 15px; color: var(--color-text-secondary); line-height: 1.75;
}
.tcgeo-root .tc-scene__label {
	display: inline-block; font-size: 10px; font-weight: 700; color: var(--color-primary);
	text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px;
}
.tcgeo-root .tc-scene p { margin: 0 0 10px; }
.tcgeo-root .tc-scene p:last-child { margin-bottom: 0; }

/* tc-ck */
.tcgeo-root .tc-ck { background: var(--color-dark-bg); color: var(--color-dark-text); border-radius: 12px; padding: 28px 30px; margin: 28px 0; }
.tcgeo-root .tc-ck__title {
	font-size: 13px; font-weight: 700; color: var(--color-primary);
	margin: 0 0 18px; text-transform: uppercase; letter-spacing: .15em;
}
.tcgeo-root .tc-ck__phase { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--color-dark-text) 12%, transparent); }
.tcgeo-root .tc-ck__phase:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.tcgeo-root .tc-ck__phase-label {
	display: inline-block; font-size: 10px; font-weight: 700; color: var(--color-dark-bg);
	background: var(--color-primary); padding: 3px 10px; border-radius: 999px;
	text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px;
}
.tcgeo-root .tc-ck__item {
	display: flex; align-items: flex-start; gap: 10px; padding: 6px 0;
	font-size: 14px; color: color-mix(in srgb, var(--color-dark-text) 90%, transparent); line-height: 1.6;
}
.tcgeo-root .tc-ck__item input[type=checkbox] {
	width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-primary); flex-shrink: 0;
}

/* tc-faq */
.tcgeo-root .tc-faq { margin: 40px 0; }
.tcgeo-root .tc-faq__label {
	display: inline-block; font-size: 24px; font-weight: 800; color: var(--color-text-primary);
	margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--color-text-primary);
}
.tcgeo-root .tc-faq details {
	background: var(--color-bg-primary); border: 1px solid var(--color-border);
	border-radius: 14px; margin-bottom: 8px; overflow: hidden;
}
.tcgeo-root .tc-faq summary {
	padding: 18px 22px; padding-right: 48px;
	font-size: 15px; font-weight: 700; color: var(--color-text-primary);
	cursor: pointer; list-style: none; position: relative; line-height: 1.5;
}
.tcgeo-root .tc-faq summary::-webkit-details-marker { display: none; }
.tcgeo-root .tc-faq summary::after {
	content: '+'; position: absolute; right: 22px; top: 50%;
	transform: translateY(-50%); font-size: 22px; font-weight: 300;
	color: var(--color-primary); transition: transform .2s; line-height: 1;
}
.tcgeo-root .tc-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.tcgeo-root .tc-faq__answer {
	padding: 16px 22px 20px; font-size: 14px; color: var(--color-text-secondary);
	line-height: 1.75; border-top: 1px solid var(--color-border);
}
.tcgeo-root .tc-faq__answer b { color: var(--color-text-primary); font-weight: 600; }

/* tc-figure */
.tcgeo-root .tc-figure { margin: 28px 0; }
.tcgeo-root .tc-figure img { width: 100%; border-radius: 12px; border: 1px solid var(--color-border); }
.tcgeo-root .tc-figure figcaption { font-size: 13px; color: var(--color-text-tertiary); margin-top: 8px; line-height: 1.6; }

/* tc-internal-links */
.tcgeo-root .tc-internal-links { background: var(--color-bg-secondary); border-radius: 12px; padding: 22px 24px; margin: 32px 0; }
.tcgeo-root .tc-internal-links__label {
	display: block; font-size: 11px; font-weight: 700; color: var(--color-primary);
	text-transform: uppercase; letter-spacing: .15em; margin-bottom: 14px;
}
.tcgeo-root .tc-internal-links ul { list-style: none; margin: 0; padding: 0; }
.tcgeo-root .tc-internal-links li { margin-bottom: 8px; }
.tcgeo-root .tc-internal-links li:last-child { margin-bottom: 0; }
.tcgeo-root .tc-internal-links a {
	display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
	color: var(--color-text-primary); text-decoration: none; padding: 4px 0;
}
.tcgeo-root .tc-internal-links a:hover { color: var(--color-primary); }
.tcgeo-root .tc-internal-links a::before { content: '\2192'; color: var(--color-primary); font-weight: 700; }

/* =============================================================================
   18. 반응형 — 태블릿 (1024px 이하)
   ============================================================================= */

@media (max-width: 1024px) {
	.tcgeo-root .hc-single-layout {
		grid-template-columns: 1fr;
		max-width: 100%;
		gap: 0;
		padding: 24px 20px 60px;
	}

	.tcgeo-root .hc-single-layout > .hc-toc-sidebar,
	.tcgeo-root .hc-single-layout > .hc-single-wrap,
	.tcgeo-root .hc-single-layout > .hc-promo-sidebar {
		grid-column: auto;
	}

	.tcgeo-root .hc-single-wrap {
		padding: 0;
		width: 100%;
		max-width: 760px;
		margin: 0 auto;
	}

	.tcgeo-root .hc-toc-sidebar {
		position: static;
		width: 100%;
		max-width: 760px;
		margin: 0 auto 20px;
		padding: 0;
	}

	.tcgeo-root .hc-toc {
		background: var(--color-bg-secondary);
		border: 1px solid var(--color-border);
		border-radius: 10px;
		padding: 0;
		overflow: hidden;
	}

	.tcgeo-root .hc-toc-heading {
		margin: 0;
		padding: 14px 18px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	.tcgeo-root .hc-toc-heading::after {
		content: '';
		width: 8px; height: 8px;
		border-right: 2px solid var(--color-text-tertiary);
		border-bottom: 2px solid var(--color-text-tertiary);
		transform: rotate(45deg);
		transition: transform .2s;
		flex-shrink: 0;
	}

	.tcgeo-root .hc-toc.is-open .hc-toc-heading::after { transform: rotate(-135deg); }

	.tcgeo-root .hc-toc-list {
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
		padding: 0 18px;
	}

	.tcgeo-root .hc-toc.is-open .hc-toc-list {
		max-height: 500px;
		padding: 0 18px 14px;
	}

	.tcgeo-root .hc-toc-link { padding: 5px 0 5px 12px; font-size: 13px; }

	.tcgeo-root .hc-promo-sidebar {
		position: static;
		order: 10;
		width: 100%;
		max-width: 760px;
		margin: 32px auto 0;
		padding: 0;
	}

	.tcgeo-root .hc-promo-widget {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		text-align: left;
		padding: 16px 20px;
	}

	.tcgeo-root .hc-promo-thumb { display: none; }

	.tcgeo-root .hc-promo-title { margin: 0; font-size: 14px; flex: 1; }

	.tcgeo-root .hc-promo-btn {
		display: inline-block;
		margin: 0;
		padding: 8px 16px;
		font-size: 13px;
		white-space: nowrap;
		flex-shrink: 0;
	}
}

/* =============================================================================
   19. 반응형 — 모바일 (768px 이하)
   ============================================================================= */

@media (max-width: 768px) {
	.tcgeo-root .hc-single-layout { padding: 16px 16px 80px; }
	.tcgeo-root .hc-single-wrap { max-width: 100%; }

	.tcgeo-root .hc-single-title { font-size: 22px; letter-spacing: -.3px; }

	.tcgeo-root .hc-meta-card {
		flex-direction: row; flex-wrap: nowrap; gap: 12px; padding: 12px 0; margin-bottom: 20px;
	}
	.tcgeo-root .hc-meta-card__item { flex: 1 1 0; min-width: 0; gap: 6px; }
	.tcgeo-root .hc-meta-card__icon { font-size: 14px; }
	.tcgeo-root .hc-meta-card__body { gap: 0; min-width: 0; }
	.tcgeo-root .hc-meta-card__label { display: none; }
	.tcgeo-root .hc-meta-card__value {
		font-size: 12px; font-weight: 600; line-height: 1.3;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.tcgeo-root .hc-meta-card__sub { display: none; }

	.tcgeo-root .hc-lede { font-size: 15px; margin-bottom: 20px; }
	.tcgeo-root .hc-key-answer { padding: 4px 0 4px 14px; margin-bottom: 22px; }
	.tcgeo-root .hc-key-answer p { font-size: 16px; }

	.tcgeo-root .hc-tldr { padding: 20px 20px 16px; border-radius: 12px; }
	.tcgeo-root .hc-tldr-title { font-size: 12px; }
	.tcgeo-root .hc-tldr-list li { font-size: 14px; padding: 7px 0 7px 24px; }
	.tcgeo-root .hc-tldr-list li::before { font-size: 13px; top: 7px; }

	.tcgeo-root .hc-single-content h2 { font-size: 19px; margin: 32px 0 12px; }
	.tcgeo-root .hc-single-content h3 { font-size: 16px; margin: 24px 0 10px; }
	.tcgeo-root .hc-single-content p { font-size: 15px; }
	.tcgeo-root .hc-single-content li { font-size: 14px; }
	.tcgeo-root .hc-single-content code { font-size: 13px; }

	.tcgeo-root .hc-single-content table { display: block; overflow-x: auto; font-size: 13px; }
	.tcgeo-root .hc-single-content thead th,
	.tcgeo-root .hc-single-content tbody td { padding: 10px 12px; }
	.tcgeo-root .hc-single-content tbody td:first-child { width: auto; }

	.tcgeo-root .hc-related-grid,
	.tcgeo-root .tc-related-grid { grid-template-columns: 1fr; gap: 10px; }

	.tcgeo-root .hc-related-card,
	.tcgeo-root .tc-related-card {
		display: grid; grid-template-columns: 80px 1fr; border-radius: 10px;
	}

	.tcgeo-root .hc-related-thumb,
	.tcgeo-root .tc-related-card__thumb { aspect-ratio: 1; border-radius: 10px 0 0 10px; overflow: hidden; }

	.tcgeo-root .hc-related-info,
	.tcgeo-root .tc-related-card__info {
		display: flex; flex-direction: column; justify-content: center; padding: 10px 14px;
	}

	.tcgeo-root .hc-related-card-title,
	.tcgeo-root .tc-related-card__title { font-size: 13px; }

	.tcgeo-root .hc-related-title,
	.tcgeo-root .hc-glossary-label,
	.tcgeo-root .tc-faq__label { font-size: 20px; padding-bottom: 10px; margin-bottom: 14px; }

	.tcgeo-root .hc-glossary-item { padding: 14px 16px; }
	.tcgeo-root .hc-glossary-term { font-size: 14px; }
	.tcgeo-root .hc-glossary-row { flex-direction: column; gap: 2px; }
	.tcgeo-root .hc-glossary-row-label { min-width: auto; font-size: 11px; }
	.tcgeo-root .hc-glossary-row-text { font-size: 13px; }

	.tcgeo-root .hc-cta { padding: 14px 16px; border-radius: 10px; }
	.tcgeo-root .hc-cta-row {
		flex-direction: row; text-align: left; gap: 0;
		padding: 10px 14px; justify-content: space-between; align-items: center;
	}
	.tcgeo-root .hc-cta-text { font-size: 14px; flex: 1; }
	.tcgeo-root .hc-cta-btn {
		width: auto; justify-content: center; font-size: 0; gap: 0; padding: 8px;
	}
	.tcgeo-root .hc-cta-btn svg { width: 18px; height: 18px; }

	/* 모바일 하단 sticky CTA */
	.tcgeo-root .hc-promo-sidebar {
		position: static; width: 100%; max-width: 100%; margin: 0; padding: 0; order: unset;
	}

	.tcgeo-root .hc-promo-widget {
		position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
		display: flex; align-items: center; justify-content: space-between;
		gap: 12px; padding: 7px 16px; margin-bottom: 0;
		border-radius: 0; border: none;
		border-top: 1px solid rgba(255,255,255,.1);
		background: var(--color-dark-bg);
		box-shadow: 0 -4px 20px rgba(0,0,0,.25);
		text-align: left; overflow: hidden;
	}

	.tcgeo-root .hc-promo-title {
		font-size: 14px; font-weight: 600; color: var(--color-bg-primary); margin: 0; flex: 1;
	}

	.tcgeo-root .hc-promo-btn {
		padding: 6px 26px; font-size: 12px; font-weight: 400;
		border-radius: 6px; flex-shrink: 0; margin: 0; display: inline-block;
	}

	/* tc-* 모바일 */
	.tcgeo-root .tc-stats { grid-template-columns: 1fr; }
	.tcgeo-root .tc-bold-quote { font-size: 16px; padding: 16px 18px; }
	.tcgeo-root .tc-qb { padding: 18px 20px; }
	.tcgeo-root .tc-qb__conc { font-size: 15px; }
	.tcgeo-root .tc-qb__row { flex-direction: column; gap: 2px; }
	.tcgeo-root .tc-qb__key { min-width: auto; }
	.tcgeo-root .tc-ck { padding: 18px 20px; }
	.tcgeo-root .tc-faq summary { padding: 14px 18px; padding-right: 44px; font-size: 14px; }
	.tcgeo-root .tc-faq summary::after { right: 18px; font-size: 20px; }
	.tcgeo-root .tc-faq__answer { padding: 14px 18px 16px; }

	.tcgeo-root .tc-glossary { padding: 20px; }
	.tcgeo-root .tc-glossary dt { margin-top: 12px; }
	.tcgeo-root .tc-related a { padding: 12px 14px; font-size: 14px; }
	.tcgeo-root .tc-cta__btn { padding: 14px; font-size: 14px; border-radius: 10px; }
}

/* =============================================================================
   20. Fragment 블록 — geo-blog fragment HTML에서 직접 렌더되는 블록
   (tc-glossary, tc-related, tc-cta, tc-disclaimer)
   테마의 렌더 헬퍼가 아닌 fragment 본문에 인라인된 HTML용 스타일.
   ============================================================================= */

/* tc-glossary — 용어 정리 (dl/dt/dd 구조) */
.tcgeo-root .tc-glossary {
	background: var(--color-primary-soft);
	border-radius: 12px;
	padding: 26px 28px;
	margin: 32px 0;
}

.tcgeo-root .tc-glossary__label {
	display: block;
	font-size: 16px;
	font-weight: 800;
	color: var(--color-text-primary);
	margin-bottom: 14px;
}

.tcgeo-root .tc-glossary dt {
	font-weight: 800;
	color: var(--color-text-primary);
	margin-top: 16px;
	font-size: 15px;
}

.tcgeo-root .tc-glossary dt:first-of-type { margin-top: 0; }

.tcgeo-root .tc-glossary dd {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--color-text-secondary);
}

.tcgeo-root .tc-glossary em {
	color: var(--color-primary);
	font-style: normal;
	font-weight: 600;
}

/* tc-related — 관련 페이지 링크 목록 (nav > ul > li > a 구조) */
.tcgeo-root .tc-related { margin: 32px 0; }

.tcgeo-root .tc-related__label {
	display: block;
	font-size: 16px;
	font-weight: 800;
	color: var(--color-text-primary);
	margin-bottom: 12px;
}

.tcgeo-root .tc-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcgeo-root .tc-related li { margin-bottom: 8px; }
.tcgeo-root .tc-related li:last-child { margin-bottom: 0; }

.tcgeo-root .tc-related a {
	display: block;
	padding: 14px 18px;
	background: var(--color-bg-secondary);
	border-radius: 12px;
	text-decoration: none;
	color: var(--color-text-primary);
	font-weight: 600;
	font-size: 15px;
	transition: background .2s, border-left-color .2s, transform .15s;
	border-left: 3px solid transparent;
}

.tcgeo-root .tc-related a:hover {
	background: var(--color-primary-light);
	border-left-color: var(--color-primary);
	transform: translateX(3px);
}

/* tc-cta — CTA 버튼 블록 (flex column, 풀폭 버튼) */
.tcgeo-root .tc-cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 36px 0;
}

.tcgeo-root .tc-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-align: center;
	background: var(--color-primary);
	color: var(--color-bg-primary);
	font-weight: 800;
	padding: 16px;
	border-radius: 12px;
	text-decoration: none;
	font-size: 15px;
	transition: background .2s, transform .15s;
}

.tcgeo-root .tc-cta__btn:hover {
	background: var(--color-primary-hover);
	transform: translateY(-1px);
	color: var(--color-bg-primary);
}

.tcgeo-root .tc-cta__btn svg {
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
}

.tcgeo-root .tc-cta__btn--line {
	background: var(--color-dark-bg);
	color: var(--color-dark-text);
}

.tcgeo-root .tc-cta__btn--line:hover {
	background: #000;
	color: var(--color-dark-text);
}

/* tc-disclaimer — 면책 문구 */
.tcgeo-root .tc-disclaimer {
	margin-top: 36px;
	font-size: 12.5px;
	color: var(--color-text-tertiary);
	line-height: 1.7;
	border-top: 1px solid var(--color-border);
	padding-top: 16px;
}

/* (unlayered — @layer 래퍼 제거: standalone 에서 부모 테마보다 우선하도록) */