/* /blog 전용 스타일 — 홈(blog.css)·폰트(fonts.css) 위에 얹는다.
   헤더는 blog.css 에서 이미 흰 배경 고정(70px)이라, 본문에 top 여백만 준다. */

.blog-page { background:#fff; }

/* 고정 헤더(70px) 아래로 본문 내림 */
.post-main, .blog-index-main { padding:110px 0 80px; }

/* ===== 글 페이지 ===== */
.post-container { max-width:760px; margin:0 auto; padding:0 24px; }

.crumb { font-size:13px; color:#94a3b8; margin-bottom:22px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.crumb a { color:#64748b; }
.crumb a:hover { color:#3B82F6; }
.crumb span.sep { color:#cbd5e1; }

.post-head { border-bottom:1px solid #eef2f7; padding-bottom:24px; margin-bottom:8px; }
.post-kw { display:inline-block; color:#3B82F6; font-weight:700; font-size:13px; letter-spacing:.3px; margin-bottom:12px; }
.post-title { font-size:clamp(26px,4vw,38px); font-weight:800; color:#1E3A5F; line-height:1.32; letter-spacing:-.6px; margin:0 0 14px; }
.post-meta { color:#94a3b8; font-size:13px; }

.post-body { margin-top:28px; }
.post-intro { font-size:17px; color:#334155; line-height:1.9; margin-bottom:8px; }
.post-body section { margin-top:38px; }
.post-body h2 { font-size:clamp(19px,2.4vw,23px); color:#1E3A5F; font-weight:800; line-height:1.4; letter-spacing:-.4px; border-left:4px solid #3B82F6; padding-left:13px; margin-bottom:14px; }
.post-body p { font-size:16px; color:#374151; line-height:1.95; }

.post-cta { margin-top:52px; background:#f0f7ff; border:1px solid #dbeafe; border-radius:16px; padding:30px 28px; text-align:center; }
.cta-lead { color:#1E3A5F; font-weight:700; font-size:18px; letter-spacing:-.3px; }
.cta-sub { color:#64748b; font-size:14px; margin-top:6px; }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.cta-tel { background:#3B82F6; color:#fff; padding:12px 26px; border-radius:8px; font-weight:700; font-size:15px; }
.cta-tel:hover { background:#2563EB; }
.cta-quick { background:#1E3A5F; color:#fff; border:none; padding:12px 26px; border-radius:8px; font-weight:700; font-size:15px; cursor:pointer; }
.cta-quick:hover { background:#16304d; }

.post-related { margin-top:52px; border-top:1px solid #eef2f7; padding-top:30px; }
.post-related h2 { font-size:17px; color:#1E3A5F; font-weight:800; margin-bottom:16px; }
.post-related ul { list-style:none; display:grid; gap:10px; }
.post-related a { color:#334155; font-size:15px; line-height:1.5; display:inline-flex; gap:8px; }
.post-related a::before { content:"→"; color:#3B82F6; }
.post-related a:hover { color:#3B82F6; }

.post-back { margin-top:34px; }
.post-back a { color:#3B82F6; font-weight:600; font-size:15px; }

/* ===== /blog 목록 ===== */
.blog-index-head { text-align:center; max-width:680px; margin:0 auto 52px; }
.blog-index-desc { color:#64748b; font-size:16px; line-height:1.8; margin-top:14px; }

.kw-group { margin-bottom:46px; }
.kw-group-title { font-size:20px; color:#1E3A5F; font-weight:800; letter-spacing:-.4px; border-left:4px solid #3B82F6; padding-left:13px; margin-bottom:18px; }
.kw-group-count { font-size:13px; color:#94a3b8; font-weight:600; margin-left:8px; }

.post-card-list { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.post-card-list a { display:block; height:100%; padding:18px 20px; border:1px solid #e8edf3; border-radius:12px; background:#fff; transition:border-color .2s, box-shadow .2s, transform .2s; }
.post-card-list a:hover { border-color:#3B82F6; box-shadow:0 6px 20px rgba(59,130,246,.10); transform:translateY(-2px); }
.pc-title { display:block; font-weight:700; color:#1E3A5F; font-size:16px; line-height:1.45; margin-bottom:7px; letter-spacing:-.3px; }
.pc-desc { display:block; color:#64748b; font-size:13px; line-height:1.6; }

.oursites { margin-top:20px; background:#f8fafc; border:1px solid #eef2f7; border-radius:16px; padding:28px 26px; }
.oursites-lead { color:#64748b; font-size:14px; margin-bottom:14px; }
.oursites-list { list-style:none; display:grid; gap:10px; }
.oursites-list a { color:#3B82F6; font-weight:600; font-size:15px; }
.oursites-list a:hover { text-decoration:underline; }
.oursites-list .os-desc { color:#94a3b8; font-weight:400; font-size:13px; margin-left:6px; }

@media (max-width:768px) {
  .post-main, .blog-index-main { padding:92px 0 70px; }
  .post-container { padding:0 16px; }
  .post-card-list { grid-template-columns:1fr; }
}