/*
 Theme Name:   MoneyInfo Child
 Theme URI:    https://infolabm.com
 Description:  머니인포 Astra 자식 테마 — 네이비 단색 미니멀 디자인
 Author:       노부장님
 Author URI:   https://infolabm.com
 Template:     astra
 Version:      1.0.0
 Text Domain:  moneyinfo-child
*/

/* ============================================
   1. 디자인 토큰 (전역 CSS 변수)
   ============================================ */
:root {
  /* 브랜드 색상 — 네이비 단색 */
  --mi-primary: #0a2540;
  --mi-primary-light: #1e3a5f;
  --mi-primary-hover: #0d2f50;

  /* 텍스트 */
  --mi-text: #1a1a1a;
  --mi-text-secondary: #6b6b6b;
  --mi-text-tertiary: #999999;

  /* 배경 */
  --mi-bg: #ffffff;
  --mi-bg-secondary: #f8f9fa;
  --mi-bg-tertiary: #f1f3f5;

  /* 구분선 */
  --mi-border: #e5e5e5;
  --mi-border-hover: #d0d0d0;

  /* 타이포그래피 */
  --mi-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mi-line-height: 1.7;

  /* 간격 */
  --mi-radius: 4px;
  --mi-content-width: 720px;
}


/* ============================================
   2. 전역 타이포그래피
   ============================================ */
body {
  font-family: var(--mi-font);
  color: var(--mi-text);
  line-height: var(--mi-line-height);
  -webkit-font-smoothing: antialiased;
}

/* 제목 위계 — 굵기와 크기로만, 색·장식 없이 */
h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 22px; font-weight: 600; line-height: 1.4; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.4; }
h4 { font-size: 16px; font-weight: 600; line-height: 1.5; }

/* 본문 */
.entry-content,
.ast-post-format-,
.ast-comment-content {
  font-size: 17px;
  line-height: var(--mi-line-height);
}

/* 보조 텍스트 */
.entry-meta,
.cat-links,
.tags-links,
.comments-link {
  font-size: 14px;
  color: var(--mi-text-secondary);
}

/* 숫자 강조 — 색 X, 굵기만 */
.entry-content strong {
  font-weight: 700;
  color: var(--mi-text);
}


/* ============================================
   3. 헤더 — 네이비 배경, 심플
   ============================================ */
.ast-primary-header-bar,
.ast-primary-header {
  background-color: var(--mi-primary) !important;
}

/* 로고 */
.site-title a,
.ast-site-title-wrap a {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}

/* 메뉴 항목 */
.ast-header-break-point .main-navigation ul li a,
.main-header-menu > .menu-item > a {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 14px;
  font-weight: 400;
  padding: 0 14px;
  transition: color 0.15s;
}

.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item.current-menu-item > a {
  color: #ffffff !important;
}


/* ============================================
   4. 계산기 드롭다운 메뉴 (hover)
   ============================================ */
/* 서브메뉴 — 흰 배경, 가벼운 그림자 */
.main-header-menu .sub-menu {
  background: var(--mi-bg);
  border: 1px solid var(--mi-border);
  border-radius: 0 0 var(--mi-radius) var(--mi-radius);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  min-width: 180px;
  padding: 4px 0;
}

.main-header-menu .sub-menu .menu-item a {
  color: var(--mi-text) !important;
  font-size: 13px;
  padding: 9px 16px;
  transition: background 0.15s;
}

.main-header-menu .sub-menu .menu-item a:hover {
  background: var(--mi-bg-secondary);
  color: var(--mi-primary) !important;
}


/* ============================================
   5. 콘텐츠 영역 — 본문 폭, 여백
   ============================================ */
.ast-container {
  max-width: 1100px;
}

/* 글 페이지 본문 폭 제한 */
.single .entry-content {
  max-width: var(--mi-content-width);
}

/* 단락 간격 */
.entry-content p {
  margin-bottom: 1.2em;
}

/* 본문 링크 — 네이비, 밑줄 */
.entry-content a {
  color: var(--mi-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content a:hover {
  color: var(--mi-primary-hover);
}


/* ============================================
   6. 표 — 깔끔, 줄무늬
   ============================================ */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 15px;
}

.entry-content table th {
  background: var(--mi-primary);
  color: #ffffff;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  font-size: 14px;
}

.entry-content table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--mi-border);
}

.entry-content table tbody tr:nth-child(even) {
  background: var(--mi-bg-secondary);
}


/* ============================================
   7. 버튼 — 네이비 단색
   ============================================ */
.wp-block-button__link,
.ast-custom-button,
a.ast-button {
  background-color: var(--mi-primary) !important;
  color: #ffffff !important;
  border: none;
  border-radius: var(--mi-radius);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 24px;
  transition: background 0.15s;
}

.wp-block-button__link:hover,
.ast-custom-button:hover,
a.ast-button:hover {
  background-color: var(--mi-primary-hover) !important;
}


/* ============================================
   8. 계산기 임베드 스코프 (.moneycalc)
   ============================================ */
.moneycalc {
  margin: 2em 0;
  padding: 24px;
  background: var(--mi-bg-secondary);
  border: none;
  border-radius: var(--mi-radius);
  font-family: var(--mi-font);
}

.moneycalc * {
  box-sizing: border-box;
}


/* ============================================
   9. FAQ 섹션
   ============================================ */
.entry-content h3:has(+ p > strong:first-child) {
  margin-top: 2em;
}


/* ============================================
   10. 푸터 — 가벼움
   ============================================ */
.ast-footer-overlay {
  background: var(--mi-bg-secondary);
  border-top: 1px solid var(--mi-border);
}

.ast-small-footer {
  font-size: 13px;
  color: var(--mi-text-secondary);
}


/* ============================================
   11. 카테고리·태그 배지 — 네이비 단색
   ============================================ */
.cat-links a,
.tags-links a {
  background: var(--mi-bg-tertiary);
  color: var(--mi-text-secondary);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--mi-radius);
  text-decoration: none;
  transition: background 0.15s;
}

.cat-links a:hover,
.tags-links a:hover {
  background: var(--mi-primary);
  color: #ffffff;
}


/* ============================================
   12. 참고 박스 (강조 인용)
   ============================================ */
.entry-content blockquote,
.wp-block-quote {
  border-left: 1px solid var(--mi-border);
  background: var(--mi-bg-secondary);
  padding: 16px 20px;
  margin: 1.5em 0;
  font-size: 15px;
  border-radius: 0;
}


/* ============================================
   13. 모바일 반응형
   ============================================ */
@media (max-width: 768px) {
  h1 { font-size: 24px; }
  h2 { font-size: 19px; }
  h3 { font-size: 16px; }

  .entry-content,
  .ast-post-format- {
    font-size: 16px;
  }

  .entry-content table {
    font-size: 13px;
  }

  .entry-content table th,
  .entry-content table td {
    padding: 8px 10px;
  }

  .moneycalc {
    padding: 16px;
    margin: 1.5em -16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}


/* ============================================
   14. 금지 사항 — AI 티 제거
   ============================================ */
/* 그라데이션 금지 */
* {
  background-image: none !important;
}

/* 예외: 실제 이미지·영상은 허용 */
img,
video,
.wp-block-image,
.wp-block-cover,
.wp-block-media-text__media {
  background-image: unset !important;
}

/* 과도한 그림자 금지 */
.wp-block-group,
.wp-block-column,
.wp-block-columns {
  box-shadow: none !important;
}


/* ============================================
   15. 인쇄 스타일
   ============================================ */
@media print {
  .ast-primary-header-bar,
  .ast-footer-overlay,
  .ast-small-footer,
  .moneycalc { display: none; }
}


/* ============================================
   16. 블로그 글 본문 폭 800px
   ============================================ */
.single .entry-content {
  max-width: 800px;
  margin: 0 auto;
}