/* ==========================================================================
   수익형 블로그 통합 최적화 CSS (유지보수 및 가독성 극대화 v5)
   Tistory & Blogspot 공용 글로벌 스타일시트
   ========================================================================== */

:root {
  /* [유지보수 가이드: 브랜드 색상 커스텀 설정]
     아래 HEX 색상 코드만 변경하면 본문의 모든 디자인이 일괄 변경됩니다. */
  --blog-primary-color: #2196F3;       /* 브랜드 메인 컬러 (목차 링크, 버튼, 테두리 포인트) */
  --blog-primary-hover: #0b7dda;       /* 마우스 호버 상태 색상 */
  --blog-accent-color: #4CAF50;        /* 보조 포인트 컬러 (안심 가이드, 보조 CTA 버튼) */
  --blog-warning-color: #f44336;       /* 경고/주의 컬러 (부작용, 주의 사항 상자) */
  
  --blog-bg-light: #f8f9fa;            /* 미니멀 배경색 (목차 박스, Q&A 질문 영역) */
  --blog-bg-experience: #fffde7;       /* E-E-A-T 30% 실전 경험 상자 배경 (파스텔 옐로우) */
  --blog-border-color: #e9ecef;        /* 일반 경계선 테두리 색상 */
  
  --blog-text-dark: #222222;           /* 본문 검은색 글자 (모바일 높은 명도 대비 확보) */
  --blog-text-muted: #666666;          /* 이미지 캡션 및 각주 보조 글자색 */
  
  --blog-radius-default: 8px;          /* 박스 모서리 기본 둥글기 */
  --blog-font-sans: 'Noto Sans KR', -apple-system, sans-serif; /* 표준 한글 웹 폰트 */
}

/* 📋 1. 자동/수동 반응형 목차 박스 (TOC) */
.blog-toc-box {
  background-color: var(--blog-bg-light);
  border: 1px solid var(--blog-border-color);
  border-left: 5px solid var(--blog-primary-color);
  padding: 18px;
  border-radius: var(--blog-radius-default);
  margin: 25px 0;
  font-family: var(--blog-font-sans);
}
.blog-toc-title {
  font-weight: bold;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-size: 1.1em;
  color: var(--blog-text-dark);
}
.blog-toc-list {
  list-style-type: none !important;
  padding-left: 5px !important;
  margin: 0 !important;
  line-height: 1.8;
}
.blog-toc-list a {
  color: var(--blog-primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.blog-toc-list a:hover {
  color: var(--blog-primary-hover);
  text-decoration: underline;
}

/* 🏷️ 2. 본문 H2 소제목 가독성 최적화 및 울트라 볼드(800) 보정 */
.blog-post-content h2,
.entry-content h2, /* 티스토리 본문 영역 표준 컨테이너 */
.post-body h2 {     /* 구글 블로그스팟 본문 영역 표준 컨테이너 */
  font-size: 1.45em;
  font-weight: 800 !important;        /* 모바일 화면에서도 섹션 구분을 완벽히 장악하는 굵기 */
  color: var(--blog-text-dark);
  line-height: 1.45;
  border-bottom: 2px solid var(--blog-border-color);
  padding-bottom: 10px;
  margin-top: 45px !important;       /* 이전 문맥 본문과의 편안한 수직 여백 확보 */
  margin-bottom: 20px !important;     /* 하단 본문과의 조화로운 간격 */
  letter-spacing: -0.03em;           /* 미세 한글 자간 보정으로 글자가 흐트러지는 피로감 차단 */
}

/* 🧪 3. E-E-A-T 70/30 법칙 경험 상자 (Experience Block) */
.blog-experience-box {
  background-color: var(--blog-bg-experience);
  border: 1px solid #fff59d;
  border-left: 5px solid #fbc02d;
  padding: 16px;
  border-radius: var(--blog-radius-default);
  margin: 25px 0;
  font-family: var(--blog-font-sans);
}
.blog-experience-title {
  font-weight: bold;
  color: #f57f17;
  margin-bottom: 6px;
  font-size: 1.05em;
}

/* ⚠️ 4. 주의/경고 박스 (Warning Block) */
.blog-warning-box {
  background-color: #ffebee;
  border: 1px solid #ffcdd2;
  border-left: 5px solid var(--blog-warning-color);
  padding: 16px;
  border-radius: var(--blog-radius-default);
  margin: 25px 0;
  font-family: var(--blog-font-sans);
}
.blog-warning-title {
  font-weight: bold;
  color: #c62828;
  margin-bottom: 6px;
  font-size: 1.05em;
}

/* 💰 5. 애드센스 광고 감싸개 (콘텐츠 혼동 제재 예방 및 상하단 여백 보호) */
.blog-ad-wrapper {
  margin: 35px 0;
  text-align: center;
  min-height: 100px;
  display: block;
  clear: both;
}

/* 🚀 6. 신뢰도 극대화 고수익 아웃바운드 CTA 버튼 */
.blog-cta-button {
  display: inline-block;
  background-color: var(--blog-primary-color);
  color: #ffffff !important;
  font-weight: bold;
  text-decoration: none !important;
  padding: 14px 28px;
  border-radius: 50px;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
  transition: all 0.3s ease;
  font-family: var(--blog-font-sans);
  text-align: center;
}
.blog-cta-button:hover {
  background-color: var(--blog-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(33, 150, 243, 0.4);
}
.blog-cta-button-accent {
  background-color: var(--blog-accent-color);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
.blog-cta-button-accent:hover {
  background-color: #388e3c;
  box-shadow: 0 6px 18px rgba(76, 175, 80, 0.4);
}

/* 🧩 7. 독자 소통형 Q&A 카드 구조 */
.blog-qa-card {
  border: 1px solid var(--blog-border-color);
  border-radius: var(--blog-radius-default);
  margin: 20px 0;
  overflow: hidden;
  font-family: var(--blog-font-sans);
}
.blog-qa-question {
  background-color: var(--blog-bg-light);
  padding: 14px 18px;
  font-weight: bold;
  border-bottom: 1px solid var(--blog-border-color);
  color: var(--blog-text-dark);
}
.blog-qa-answer {
  padding: 16px 18px;
  background-color: #ffffff;
  line-height: 1.7;
}

/* 🖼️ 8. CLS 레이아웃 흔들림 방지 및 티스토리 이미지 치환자 호환 격리 박스 */
.blog-image-container {
  margin: 30px auto;
  text-align: center;
}
.blog-image-container img,
.blog-image-container figure img,
.blog-image-container .imageblock img {
  max-width: 100% !important;
  height: auto !important;
  border: 1px solid var(--blog-border-color);
  border-radius: var(--blog-radius-default);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.blog-image-container .blog-image-caption,
.blog-image-container figcaption,
.blog-image-container .cap1 {
  font-size: 0.85em !important;
  color: var(--blog-text-muted) !important;
  margin-top: 8px !important;
  text-align: center !important;
}