/* =============================================================
   sykimlaw — ai-readable.css
   Phase 5: AI Citation / LLM Crawler Friendly Structure
   목표: 본문 가독성 · 요약 블록 · 결론 블록 · FAQ 간격 최적화
   ============================================================= */

/* ═══════════════════════════════════════════════════════════
   1. LONG-FORM READABILITY ENHANCEMENT
   typography.css 값에 가산 — 오버라이드 아님
   ═══════════════════════════════════════════════════════════ */

/* 본문 최대폭 — 읽기 편한 CPL(characters per line) 확보 */
.sykim-single__body .wp-block-post-content {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* 단락 간격 — AI가 문단 단위로 구분하기 쉽게 */
.sykim-single__body .wp-block-post-content p {
	margin-bottom: 1.5em;
}

.sykim-single__body .wp-block-post-content p:last-child {
	margin-bottom: 0;
}

/* H2 위 여백 — 섹션 전환 명확화 */
.sykim-single__body .wp-block-post-content h2 {
	margin-top: 3.25rem;
	margin-bottom: 1.125rem;
}

.sykim-single__body .wp-block-post-content h3 {
	margin-top: 2.25rem;
	margin-bottom: 0.875rem;
}

/* 첫 요소 앞 여백 제거 */
.sykim-single__body .wp-block-post-content > *:first-child {
	margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════
   2. AI SUMMARY BLOCK
   글 서두 또는 섹션 앞에 배치. AI가 핵심 내용 파악에 활용.
   ═══════════════════════════════════════════════════════════ */

.ai-summary {
	background-color: rgba(13, 31, 60, 0.03);
	border: 1px solid rgba(13, 31, 60, 0.09);
	border-left: 3px solid var(--wp--preset--color--navy-900);
	border-radius: 0 4px 4px 0;
	padding: 1.375rem 1.75rem;
	margin: 0 0 2.5rem 0;
	font-family: var(--wp--preset--font-family--noto-sans-kr);
}

.ai-summary__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(45, 51, 65, 0.45);
	margin-bottom: 0.75rem;
}

.ai-summary ul,
.ai-summary ol {
	padding-left: 1.25rem;
	margin: 0;
}

.ai-summary li {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(45, 51, 65, 0.78);
	margin-bottom: 0.375rem;
	word-break: keep-all;
}

.ai-summary li:last-child {
	margin-bottom: 0;
}

.ai-summary p {
	font-size: 0.9375rem;
	line-height: 1.78;
	color: rgba(45, 51, 65, 0.78);
	margin-bottom: 0.5rem;
	word-break: keep-all;
}

.ai-summary p:last-child {
	margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   3. KEY TAKEAWAY (확장)
   기존 single-post.css의 .key-takeaway를 보완
   ═══════════════════════════════════════════════════════════ */

/* 핵심 요점 리스트 형태 지원 */
.key-takeaway ul,
.key-takeaway ol {
	padding-left: 1.25rem;
	margin: 0.5rem 0 0 0;
}

.key-takeaway li {
	font-size: clamp(0.9375rem, 0.5rem + 1vw, 1rem);
	line-height: 1.78;
	color: var(--sykim-text-body, #2D3341);
	margin-bottom: 0.375rem;
}

.key-takeaway li:last-child {
	margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   4. LEGAL CONCLUSION BLOCK (additive)
   .legal-conclusion 기본 스타일은 typography.css에 정의됨.
   .legal-conclusion__body 는 p 대체 클래스로 typography.css에 추가됨.
   여기서는 AI readability를 위한 간격 조정만 담당.
   ═══════════════════════════════════════════════════════════ */

/* FAQ/Article 내부의 legal-conclusion 위아래 여백 강화 */
.sykim-single__body .wp-block-post-content .legal-conclusion {
	margin-top: 2.75rem;
	margin-bottom: 2.75rem;
}

/* ═══════════════════════════════════════════════════════════
   5. FAQ SPACING — AI-friendly Q&A structure
   ═══════════════════════════════════════════════════════════ */

/* 글 내 FAQ 블록: details/summary 패턴 외에 heading 기반도 지원 */
.sykim-single__body .wp-block-post-content .wp-block-details {
	border-bottom: 1px solid rgba(13, 31, 60, 0.09);
	padding: 0.25rem 0;
}

.sykim-single__body .wp-block-post-content .wp-block-details summary {
	padding: 1.125rem 2.75rem 1.125rem 0;
	font-weight: 600;
	font-size: clamp(0.9375rem, 0.5rem + 1vw, 1.0625rem);
	line-height: 1.55;
	color: var(--wp--preset--color--navy-900);
	font-family: var(--wp--preset--font-family--noto-sans-kr);
	word-break: keep-all;
	cursor: pointer;
	position: relative;
	list-style: none;
}

.sykim-single__body .wp-block-post-content .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.sykim-single__body .wp-block-post-content .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.375rem;
	font-weight: 300;
	color: var(--wp--preset--color--gold-500);
	line-height: 1;
}

.sykim-single__body .wp-block-post-content .wp-block-details[open] summary::after {
	content: "−";
}

.sykim-single__body .wp-block-post-content .wp-block-details > *:not(summary) {
	padding-bottom: 1.125rem;
	font-size: clamp(0.9375rem, 0.5rem + 1vw, 1rem);
	line-height: 1.85;
	color: rgba(45, 51, 65, 0.78);
}

/* FAQ 섹션 앞뒤 여백 */
.sykim-single__body .wp-block-post-content .sykim-faq-section {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

/* ═══════════════════════════════════════════════════════════
   6. HEADING HIERARCHY CLARITY
   AI가 문서 구조를 파악하기 위한 시각적 계층 명확화
   ═══════════════════════════════════════════════════════════ */

/* H2: 섹션 구분 강조 */
.sykim-single__body .wp-block-post-content h2 {
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(13, 31, 60, 0.08);
}

/* H3: 소섹션 — border 없이 간격으로만 구분 */
.sykim-single__body .wp-block-post-content h3 {
	padding-bottom: 0;
	border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════
   7. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 599px) {
	.ai-summary {
		padding: 1.125rem 1.25rem;
		margin-bottom: 2rem;
	}

	.legal-conclusion {
		padding: 1.375rem 1.375rem;
		margin: 2rem 0;
	}
}