/* blog.css */
.blog-hero{
  background:linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899);
  padding:40px 24px; border-radius:20px; color:white;
  text-align:center; margin-bottom:24px; position:relative; overflow:hidden;
}
.blog-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15) 0%, transparent 50%);
}
.blog-hero-title{
  font-size:2rem; font-weight:900; margin:0 0 8px;
  position:relative;
}
.blog-hero-sub{
  font-size:0.9rem; opacity:0.95; margin:0 0 20px;
  position:relative;
}
.blog-search-wrap{ position:relative; max-width:480px; margin:0 auto; }
.blog-search{
  width:100%; padding:14px 20px; border-radius:30px;
  border:none; font-size:0.95rem; box-sizing:border-box;
  background:rgba(255,255,255,0.95); color:#0f172a;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.blog-search:focus{ outline:none; box-shadow:0 4px 24px rgba(0,0,0,0.2); }

.blog-cats{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;
  padding-bottom:12px; border-bottom:1px solid #f1f5f9;
}
.blog-cat{
  padding:8px 16px; border-radius:20px; border:1px solid #e2e8f0;
  background:white; font-size:0.82rem; font-weight:600; cursor:pointer;
  color:#64748b; transition:all 0.15s;
}
.blog-cat:hover{ background:#f8fafc; color:#0f172a; }
.blog-cat.active{
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  color:white; border-color:transparent;
}

.blog-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
@media(max-width:880px){ .blog-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:540px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card{
  background:white; border:1px solid #e2e8f0; border-radius:16px;
  overflow:hidden; transition:all 0.2s;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
}
.blog-card:hover{
  transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1);
  border-color:#3b82f6;
}
.blog-card-cover{
  height:160px; display:block; position:relative; overflow:hidden;
  background:#F1F5F9;
}
.blog-card-cover img.blog-card-img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.35s ease;
}
.blog-card:hover .blog-card-img{ transform:scale(1.04); }
.blog-card-cat-badge{
  position:absolute; top:10px; left:10px;
  padding:4px 12px; border-radius:999px;
  background:rgba(15,23,42,0.85);
  font-size:0.68rem; font-weight:700; color:white;
  letter-spacing:-0.2px;
}
.blog-card-body{ padding:16px; flex:1; display:flex; flex-direction:column; }
.blog-card-title{
  font-size:0.95rem; font-weight:700; line-height:1.4;
  margin-bottom:8px; color:#0f172a; flex:1;
}
.blog-card-desc{
  font-size:0.78rem; color:#64748b; line-height:1.5;
  margin-bottom:10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-card-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.7rem; color:#94a3b8; border-top:1px solid #f1f5f9; padding-top:10px;
}

/* Category gradients */
.cov-tax{ background:linear-gradient(135deg,#f59e0b,#ef4444); }
.cov-realestate{ background:linear-gradient(135deg,#10b981,#06b6d4); }
.cov-invest{ background:linear-gradient(135deg,#3b82f6,#8b5cf6); }
.cov-health{ background:linear-gradient(135deg,#ec4899,#f43f5e); }

.blog-empty{ text-align:center; padding:40px; color:#94a3b8; }

/* ===== Blog Post Page ===== */
.blog-post{
  max-width:720px; margin:0 auto; padding:0;
}
.blog-post-header{
  padding:24px 0 20px; border-bottom:1px solid #f1f5f9; margin-bottom:24px;
}
.blog-post-cat{
  display:inline-block; padding:4px 12px; border-radius:12px;
  font-size:0.7rem; font-weight:700; color:white;
  margin-bottom:12px;
}
.cat-tax{ background:linear-gradient(135deg,#f59e0b,#ef4444); }
.cat-realestate{ background:linear-gradient(135deg,#10b981,#06b6d4); }
.cat-invest{ background:linear-gradient(135deg,#3b82f6,#8b5cf6); }
.cat-health{ background:linear-gradient(135deg,#ec4899,#f43f5e); }
.blog-post-title{
  font-size:1.8rem; font-weight:900; line-height:1.3;
  margin:0 0 12px; color:#0f172a;
}
.blog-post-meta{
  display:flex; gap:14px; font-size:0.78rem; color:#64748b;
  align-items:center;
}
.blog-post-meta .dot{ color:#cbd5e1; }
.blog-post-cover{
  height:260px; border-radius:20px; margin-bottom:28px;
  background-size:cover; background-position:center;
  background-color:#F1F5F9;
  font-size:0; color:transparent; /* 기존 이모지 텍스트 숨김 */
  box-shadow:0 8px 24px rgba(15,23,42,0.08);
  position:relative; overflow:hidden;
}
.blog-post-cover.cat-tax{ background:#FEF3C7 url('/assets/blog/cover-tax.svg') center/cover no-repeat !important; }
.blog-post-cover.cat-realestate{ background:#DBEAFE url('/assets/blog/cover-realestate.svg') center/cover no-repeat !important; }
.blog-post-cover.cat-invest{ background:#D1FAE5 url('/assets/blog/cover-invest.svg') center/cover no-repeat !important; }
.blog-post-cover.cat-health{ background:#FCE7F3 url('/assets/blog/cover-health.svg') center/cover no-repeat !important; }
@media(max-width:640px){ .blog-post-cover{ height:200px; } }
.blog-post-body{
  font-size:0.95rem; line-height:1.8; color:#334155;
}
.blog-post-body h2{
  font-size:1.3rem; font-weight:800; color:#0f172a;
  margin:32px 0 14px; padding-top:8px;
  border-top:2px solid #f1f5f9;
}
.blog-post-body h2:first-of-type{ border-top:none; padding-top:0; }
.blog-post-body h3{
  font-size:1.05rem; font-weight:700; color:#1e293b;
  margin:22px 0 10px;
}
.blog-post-body p{ margin:0 0 14px; }
.blog-post-body ul, .blog-post-body ol{ margin:0 0 14px 20px; padding:0; }
.blog-post-body li{ margin-bottom:6px; }
.blog-post-body strong{ color:#0f172a; }
.blog-post-body blockquote{
  border-left:4px solid #3b82f6; padding:12px 18px;
  margin:18px 0; background:#eff6ff; border-radius:0 10px 10px 0;
  font-style:italic; color:#1e40af;
}
.blog-post-body table{
  width:100%; border-collapse:collapse; margin:16px 0;
  font-size:0.85rem; border-radius:10px; overflow:hidden;
  border:1px solid #e2e8f0;
}
.blog-post-body th, .blog-post-body td{
  padding:10px 14px; text-align:left; border-bottom:1px solid #f1f5f9;
}
.blog-post-body th{
  background:linear-gradient(135deg,#f8fafc,#e2e8f0);
  font-weight:700; color:#0f172a;
}
.blog-post-body tr:last-child td{ border-bottom:none; }
.blog-post-body code{
  background:#f1f5f9; padding:2px 6px; border-radius:4px;
  font-size:0.85em; color:#ef4444;
}

.post-cta{
  background:linear-gradient(135deg,#eff6ff,#f5f3ff);
  border:1px solid #3b82f6; border-radius:16px;
  padding:20px; margin:24px 0; text-align:center;
}
.post-cta-title{ font-size:1rem; font-weight:700; margin-bottom:8px; color:#0f172a; }
.post-cta-desc{ font-size:0.82rem; color:#64748b; margin-bottom:14px; }
.post-cta-btn{
  display:inline-block; padding:10px 24px;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  color:white; text-decoration:none; border-radius:12px;
  font-weight:600; font-size:0.88rem;
  transition:transform 0.15s;
}
.post-cta-btn:hover{ transform:translateY(-2px); }

.post-faq{
  background:#fafafa; border-radius:14px; padding:20px;
  margin:24px 0; border:1px solid #e2e8f0;
}
.post-faq h2{ border:none !important; padding-top:0 !important; margin-top:0 !important; }
.post-faq details{
  border-bottom:1px solid #e2e8f0; padding:12px 0;
}
.post-faq details:last-child{ border-bottom:none; }
.post-faq summary{
  font-weight:600; cursor:pointer; color:#0f172a;
  font-size:0.9rem; padding:4px 0;
}
.post-faq summary::marker{ color:#3b82f6; }
.post-faq details[open] summary{ color:#3b82f6; }
.post-faq p{ margin:8px 0 0; font-size:0.85rem; color:#475569; }

.post-toc{
  background:#f8fafc; border:1px solid #e2e8f0;
  border-radius:12px; padding:16px 20px; margin-bottom:24px;
}
.post-toc-title{
  font-size:0.78rem; font-weight:700; color:#64748b;
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px;
}
.post-toc ul{ margin:0; padding-left:18px; font-size:0.85rem; }
.post-toc li{ margin-bottom:4px; }
.post-toc a{ color:#3b82f6; text-decoration:none; }
.post-toc a:hover{ text-decoration:underline; }

.post-related{
  margin-top:40px; padding-top:24px; border-top:1px solid #f1f5f9;
}
.post-related h2{
  font-size:1.1rem; margin-bottom:14px; color:#0f172a;
  border:none !important;
}
.post-related-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
@media(max-width:640px){ .post-related-grid{ grid-template-columns:1fr; } }
.post-related-card{
  padding:14px; border:1px solid #e2e8f0; border-radius:12px;
  text-decoration:none; color:inherit; transition:all 0.15s;
  background:white;
}
.post-related-card:hover{
  border-color:#3b82f6; transform:translateY(-2px);
}
.post-related-card b{ display:block; font-size:0.82rem; color:#0f172a; margin-bottom:4px; }
.post-related-card small{ font-size:0.7rem; color:#94a3b8; }

.post-share{
  display:flex; gap:8px; margin:20px 0; justify-content:center;
}
.post-share button{
  padding:8px 14px; border-radius:20px;
  border:1px solid #e2e8f0; background:white; cursor:pointer;
  font-size:0.78rem; font-weight:600; color:#475569;
  transition:all 0.15s;
}
.post-share button:hover{ background:#f1f5f9; transform:translateY(-1px); }

.author-box{
  display:flex; gap:14px; align-items:center;
  padding:16px; background:#f8fafc; border-radius:12px;
  margin:20px 0;
}
.author-avatar{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:800;
}
.author-name{ font-weight:700; font-size:0.9rem; color:#0f172a; }
.author-bio{ font-size:0.75rem; color:#64748b; margin-top:2px; }

[data-theme="dark"] .blog-cat{ background:#1e293b; color:#94a3b8; border-color:#334155; }
[data-theme="dark"] .blog-cat:hover{ background:#0f172a; color:#e2e8f0; }
[data-theme="dark"] .blog-card{ background:#1e293b; border-color:#334155; }
[data-theme="dark"] .blog-card-title{ color:#e2e8f0; }
[data-theme="dark"] .blog-post-title,[data-theme="dark"] .blog-post-body h2,[data-theme="dark"] .blog-post-body h3{ color:#e2e8f0; }
[data-theme="dark"] .blog-post-body{ color:#cbd5e1; }
[data-theme="dark"] .blog-post-body th{ background:#0f172a; color:#e2e8f0; }
[data-theme="dark"] .post-toc,[data-theme="dark"] .post-faq,[data-theme="dark"] .author-box,[data-theme="dark"] .post-related-card{ background:#1e293b; border-color:#334155; }