/* ============================================================
   TeraClass 블로그 레이아웃 패리티
   차일드 테마 전환 전(hefo 주입) 화면과 동일하게 맞춘다.
   차일드 테마 파일은 건드리지 않는다 — GitLab teraflow-theme 배포본이므로.
   2026-10-01
   ============================================================ */

/* ── 1. 가로 오버플로 가드 ──────────────────────────────
   전환 전 tc-layout-css 의 첫 줄이었다. 차일드 테마에는 overflow-x 규칙이
   하나도 없어서, 이걸 빼면 헤더 로고가 잘리는 가로 스크롤이 생긴다. */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

/* ── 2. 그리드: 차일드 기본 300/800/300(max 1400) → 전환 전 240/860/290(max 1460) ── */
.hc-single-layout,
.hc-single-layout.hc-has-sidebar {
	grid-template-columns: 240px minmax(0, 860px) 290px !important;
	max-width: 1460px !important;
	gap: 30px !important;
	padding: 36px 24px 90px !important;
}

/* 우측 위젯이 없을 때 빈 290px 칸이 남는 문제 — 2단으로 접는다 */
.hc-single-layout:not(.hc-has-sidebar) {
	grid-template-columns: 240px minmax(0, 860px) !important;
	max-width: 1160px !important;
}

/* ── 3. 본문 오버플로 안전장치 ──────────────────────────
   전환 전 .tc-layout__main 에 걸려 있던 규칙들. 긴 URL·넓은 표·큰 이미지가
   컬럼을 밀어내지 않게 한다. 차일드 테마에는 없다. */
.hc-single-wrap,
.hc-single-content {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.hc-single-content img {
	max-width: 100%;
	height: auto;
}

.hc-single-content figure,
.hc-single-content .wp-caption {
	width: auto !important;
	max-width: 100% !important;
}

.hc-single-content figure img,
.hc-single-content p img {
	width: auto;
	max-width: 100%;
	height: auto;
}

.hc-single-content a {
	overflow-wrap: anywhere;
	word-break: break-all;
}

.hc-single-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.hc-single-content pre {
	max-width: 100%;
	overflow-x: auto;
}

/* ── 4. 프로모 버튼: 브랜드 오렌지 복원 ──────────────────
   전환 전 .tc-promo__btn 은 #FF6B35 였다. 차일드 기본값은 #0064FF 라
   Elementor 전역 Accent(#FF6B3C)와도 어긋난다. */
.hc-promo-btn {
	background: #FF6B35 !important;
	border-radius: 99px !important;
	padding: 14px 18px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-align: center !important;
}

.hc-promo-btn:hover {
	background: #E55A28 !important;
}

/* ── 5. 읽는 시간 메타 (JS 가 주입) ── */
.hc-single-meta .tc-read-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: #938a82;
}

/* ── 6. 모바일 ──────────────────────────────────────────
   차일드 테마의 1024px 블록은 그대로 두고, 1025~1080px 구간만 보강한다.
   전환 전에는 1080px 에서 1단으로 접혔다. */
@media (max-width: 1080px) {
	.hc-single-layout,
	.hc-single-layout.hc-has-sidebar,
	.hc-single-layout:not(.hc-has-sidebar) {
		grid-template-columns: minmax(0, 1fr) !important;
		max-width: 100% !important;
		gap: 18px !important;
		padding: 18px 14px 60px !important;
	}
}