/* Smart Finance Guide - Custom Styles */
/* Optimized for Core Web Vitals (LCP, CLS, FID) */

:root {
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
}

/* .font-sans is listed too: the CDN Tailwind class would otherwise win and fall back to system-ui */
body, .font-sans {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent CLS - reserve space for ads */
.adsense-container {
  min-height: 0;
  background: #f8fafc;
  border-radius: 8px;
}
.adsense-sidebar {
  min-height: 250px;
  background: #f8fafc;
  border-radius: 8px;
}

/* Prose base (the CDN Tailwind build has no typography plugin, so body text needs its own rules) */
.prose { font-size: 1.0625rem; line-height: 1.75; color: #1f2937; }
.prose p { margin: 0 0 1.25em; }
.prose h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: #111827; margin-bottom: .75rem; }
.prose h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 600; color: #111827; margin-bottom: .5rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 1.25em; }
.prose li { margin: .35em 0; }
.prose a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; }
.prose table { width: 100%; margin: 0 0 1.25em; border-collapse: collapse; }
.prose strong { font-weight: 600; color: #111827; }

/* Prose customization */
.prose h2 { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
.prose h3 { margin-top: 1.5rem; }
.prose table { font-size: 0.875rem; }
.prose table th { background-color: #f1f5f9; font-weight: 600; }
.prose table td, .prose table th { padding: 0.75rem 1rem; border: 1px solid #e2e8f0; }
.prose blockquote { border-left-color: var(--blue-700); background: #eff6ff; padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; }
.prose code { background: #f1f5f9; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875em; }
.prose pre { background: #1e293b; border-radius: 12px; }
.prose img { border-radius: 12px; }

/* TOC */
.toc ul { list-style: none; padding-left: 0; }
.toc ul ul { padding-left: 1.25rem; }
.toc li { padding: 0.25rem 0; }
.toc a { color: #4b5563; text-decoration: none; }
.toc a:hover { color: var(--blue-700); }

/* FAQ accordion */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details[open] summary { border-bottom: 1px solid #e5e7eb; }

/* Line clamp utility */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Smooth scroll */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

/* Print styles */
@media print {
  .adsense-container, .adsense-sidebar, nav, footer, aside { display: none !important; }
  .prose { max-width: 100% !important; }
}

/* Dark mode (optional, respects system preference) */
@media (prefers-color-scheme: dark) {
  /* Add dark mode styles when ready */
}

/* ═══ Auto Ads 빈 슬롯 간격 제거 ═══ */
/* 광고 미충전 시 빈 공간 방지 */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
}
ins.adsbygoogle:not([data-ad-status="filled"]) {
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height 0.3s, opacity 0.3s;
}
ins.adsbygoogle[data-ad-status="filled"] {
  opacity: 1 !important;
  max-height: 1000px !important;
}
/* Auto Ads 컨테이너 빈 공간 방지 */
.google-auto-placed {
  min-height: 0 !important;
}
.google-auto-placed:empty,
.google-auto-placed:not(:has(ins[data-ad-status="filled"])) {
  display: none !important;
}