/*
 * VoltInsight 가독성/레이아웃 보정 스타일
 * 목표: 기술 콘텐츠(전기·배터리·ESS·AI데이터센터) 정독률 향상, 모바일 우선,
 *       계산기(#vi-sp-calc 등, 기존 게시글 본문에 인라인으로 존재)와의 폭 정합성.
 * 원칙: 과한 그라데이션/네온/카드 남용 금지. 네이비·블루·청록 위주의 정돈된 톤.
 */

/* 1) 본문 가독성 ------------------------------------------------------- */
.entry-content p {
	margin-block: 0.85em;
}

/* 한 문단이 너무 길어지지 않도록 시각적 리듬만 보정(실제 문단 분리는 콘텐츠 편집 단계에서) */
.entry-content p + p {
	margin-top: 1em;
}

/* 2) 표: 모바일 가로 스크롤 처리(테마.json의 core/table 규칙 보강) -------- */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.wp-block-table table {
	min-width: 480px;
}

/* 3) 계산기(#vi-sp-calc 등) 폭 정합성 ---------------------------------- */
/*
 * 기존 계산기 블록은 본문 콘텐츠 안에서 max-width:920px로 하드코딩되어 있습니다.
 * 자식 테마의 본문 콘텐츠 폭(contentSize)은 760px이므로, 계산기가 있는 페이지에서는
 * 편집기에서 해당 Custom HTML 블록을 "넓게(wide)" 정렬로 지정하는 것을 권장합니다.
 * 아래는 넓게 정렬된 컨테이너 안에서 계산기가 자연스럽게 중앙 정렬되도록 하는 보정입니다.
 */
.alignwide > [id^="vi-"],
.alignfull > [id^="vi-"] {
	max-width: 920px;
	margin-inline: auto;
}

/* 4) 핵심 요약 박스 (재사용 패턴) --------------------------------------- */
.vi-summary-box {
	background: var(--wp--preset--color--accent-5, #F8FAFC);
	border-left: 4px solid var(--wp--preset--color--accent-1, #1D4ED8);
	border-radius: 8px;
	padding: 1.1rem 1.3rem;
	margin-block: 1.4rem;
}
.vi-summary-box strong:first-child {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--accent-3, #14345C);
}

/* 5) 관련 계산기 / 관련 글 카드 (재사용 패턴, 실제 결제/광고 요소 없음) ---- */
.vi-related-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-block: 1.6rem;
}
.vi-related-card {
	border: 1px solid var(--wp--preset--color--accent-6, #E2E8F0);
	border-radius: 12px;
	padding: 16px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	display: block;
}
.vi-related-card:hover {
	border-color: var(--wp--preset--color--accent-1, #1D4ED8);
}
.vi-related-card .vi-card-label {
	font-size: 0.8rem;
	color: var(--wp--preset--color--accent-4, #64748B);
	display: block;
	margin-bottom: 4px;
}
.vi-related-card .vi-card-title {
	font-weight: 700;
	font-size: 1rem;
}

/* 6) 절제된 CTA (도구 안내 / 무료 자료 등, 광고 아님) -------------------- */
.vi-cta-box {
	border: 1px solid var(--wp--preset--color--accent-2, #0E7490);
	border-radius: 10px;
	padding: 1rem 1.2rem;
	margin-block: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.vi-cta-box .vi-cta-text {
	font-weight: 600;
}
.vi-cta-box .vi-cta-button {
	background: var(--wp--preset--color--accent-1, #1D4ED8);
	color: #fff;
	padding: 0.55rem 1.1rem;
	border-radius: 6px;
	text-decoration: none;
	font-size: 0.9rem;
	white-space: nowrap;
}

/* 7) 모바일(375~390px) 가로 스크롤 방지 안전장치 -------------------------- */
@media (max-width: 480px) {
	.wp-site-blocks,
	.entry-content {
		overflow-x: hidden;
	}
	.vi-related-cards {
		grid-template-columns: 1fr;
	}
}

/* ===================================================================== */
/* 8) 홈페이지 리디자인(Phase 53) — 기술 포털 구조                          */
/* 목표: "Blog" 기본 템플릿 인상 제거, 5초 안에 사이트 목적/이동경로 파악.   */
/* 색상은 기존 accent-1~6 토큰만 재사용(신규 색상 추가하지 않음).            */
/* ===================================================================== */

.vi-section-title {
	font-size: 1.5rem;
	margin-bottom: 1.2rem;
}
.vi-section-desc {
	color: var(--wp--preset--color--accent-4, #64748B);
	margin-bottom: 1.4rem;
}
.vi-topic-title {
	font-size: 1.2rem;
	margin-bottom: 0.9rem;
}

/* --- Hero --------------------------------------------------------------- */
.vi-hero {
	text-align: left;
}
.vi-hero-title {
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	line-height: 1.3;
	margin-bottom: 0.7rem;
	color: var(--wp--preset--color--accent-3, #14345C);
}
.vi-hero-desc {
	max-width: 640px;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--wp--preset--color--accent-4, #64748B);
	margin-bottom: 1.4rem;
}
.vi-hero-buttons {
	gap: 12px;
}

/* --- 카테고리 바로가기 ---------------------------------------------------- */
.vi-category-grid {
	gap: 10px;
}
.vi-category-card {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--wp--preset--color--accent-6, #E2E8F0);
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--accent-3, #14345C);
	font-weight: 600;
	font-size: 0.95rem;
	background: #fff;
}
.vi-category-card:hover,
.vi-category-card:focus-visible {
	border-color: var(--wp--preset--color--accent-1, #1D4ED8);
	color: var(--wp--preset--color--accent-1, #1D4ED8);
}

/* --- 게시글 카드 그리드(최신 글 / 분야별 최신 글 공용) ---------------------- */
.vi-post-grid .wp-block-post-template {
	gap: 24px;
}
.vi-post-card {
	border: 1px solid var(--wp--preset--color--accent-6, #E2E8F0);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	height: 100%;
}
.vi-post-card .wp-block-post-featured-image {
	margin: 0;
}
.vi-post-card .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
	display: block;
}
.vi-post-card > .wp-block-group {
	padding: 0 14px 16px;
}
.vi-post-card-cat {
	display: block;
	margin-top: 14px;
	color: var(--wp--preset--color--accent-2, #0E7490);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.vi-post-card-title {
	margin-top: 6px;
	margin-bottom: 6px;
	font-size: 1.05rem;
	line-height: 1.4;
	/* 제목 최대 2줄로 제한 - 카드 높이가 들쭉날쭉해지지 않도록 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.vi-post-card-title a {
	text-decoration: none;
	color: var(--wp--preset--color--accent-3, #14345C);
}
.vi-post-card-excerpt {
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent-4, #64748B);
	line-height: 1.6;
	/* 요약문 최대 3줄로 제한 - 카드 높이 일관성 확보 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- 계산기 섹션 ---------------------------------------------------------- */
.vi-calc-grid {
	gap: 10px;
	margin-top: 4px;
}
.vi-calc-card {
	display: inline-block;
	padding: 0.65rem 1.2rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent-1, #1D4ED8);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}
.vi-calc-card:hover,
.vi-calc-card:focus-visible {
	background: var(--wp--preset--color--accent-3, #14345C);
}
.vi-calc-hub-link {
	margin-top: 1rem;
}
.vi-calc-hub-link a {
	font-weight: 600;
	color: var(--wp--preset--color--accent-2, #0E7490);
}

/* --- 푸터 ----------------------------------------------------------------- */
.vi-footer-links p {
	margin-block: 0.25em;
}

/* --- 반응형: 태블릿/모바일에서 그리드 열 수 강제 조정 ------------------------ */
@media (max-width: 960px) {
	.vi-post-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 600px) {
	.vi-post-grid .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
	.vi-category-grid,
	.vi-calc-grid {
		flex-direction: column;
		align-items: stretch;
	}
	.vi-category-card,
	.vi-calc-card {
		text-align: center;
	}
}

/* ===================================================================== */
/* 9) 글 상세 제목 줄바꿈 + byline(작성자·날짜·카테고리) — 사용자 육안검토   */
/* 발견 문제 2건 수정: (1) 한글 제목 단어가 중간에서 분리되던 문제,          */
/* (2) "Written by ... in ..." 영문 byline을 자연스러운 한국어로 교체.      */
/* ===================================================================== */

/* WordPress 코어가 `.wp-block-post-title { word-break: break-word; }`를 인라인
 * 스타일로 늦게 주입해 동일 우선순위에서 소스 순서로 이겨버린다. 태그+클래스
 * 조합으로 명시도를 높여 항상 이 규칙이 적용되도록 한다. */
h1.wp-block-post-title.vi-post-title {
	word-break: keep-all;
	overflow-wrap: break-word;
}

.vi-byline {
	color: var(--wp--preset--color--accent-4, #64748B);
	align-items: center;
}
.vi-byline-sep {
	color: var(--wp--preset--color--accent-6, #E2E8F0);
}