/* KEY-FREE × 캠프 가드 블로그 — 글 목록·글 본문 공용 (2026-10-02 신설)
   ☠사이트 공용 층(../bundle.css · ../design-v5.css) 위에 얹는 글 전용 모양만 둔다.
   ☠shared/apply_design_v5.py 는 사이트 루트 페이지만 훑는다 — blog/ 의 design-v5 링크 ?v= 는 손으로 맞춘다. */

/* 내비가 첫 화면에서 흰 글씨(투명 바탕)라 머리 띠는 자료실·커뮤니티처럼 남색으로 둔다 */
.blog-hero{background:linear-gradient(135deg,#0b1f44 0%,#13347e 100%);color:#fff;padding:140px 0 64px}
.blog-hero .wrap{max-width:760px}
.blog-hero .crumb{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:18px}
.blog-hero .crumb a{color:rgba(255,255,255,.9);text-decoration:underline;text-underline-offset:3px}
.blog-hero h1{color:#fff;margin:0}
.blog-hero .lead{color:rgba(255,255,255,.9)}
.blog-hero .lead strong{color:#fff}

.post{max-width:760px;margin:0 auto;padding:0 28px}
.post section{padding:48px 0;border-bottom:1px solid var(--line)}
.post section:last-child{border-bottom:none}
.post .kicker{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--accent);margin-bottom:8px}
.post h2{font-size:clamp(22px,3vw,28px);font-weight:900;letter-spacing:-.02em;line-height:1.4;margin:0 0 16px;color:var(--ink)}
.post p{font-size:17px;line-height:1.85;color:var(--ink);margin:0 0 14px}
.post p strong{color:var(--ink)}
.post a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.post .quote{border-left:3px solid var(--accent);background:var(--bg-soft);padding:16px 20px;margin:20px 0 0;font-size:17px;font-weight:700;line-height:1.7;color:var(--ink)}
.post .note{font-size:15px;line-height:1.7;color:var(--ink-2);margin-top:12px}

.post figure{margin:24px 0 0}
.post figure img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff}
.post figcaption{font-size:14px;color:var(--ink-2);margin-top:8px}

.post table{width:100%;border-collapse:collapse;margin:18px 0 0;font-size:16px}
.post th,.post td{border-top:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top;line-height:1.6}
.post thead th{border-top:2px solid var(--ink);font-size:14px;color:var(--ink-2);font-weight:700}
.post tbody th{font-weight:800;white-space:nowrap;color:var(--ink)}
.post td.price{font-weight:800;white-space:nowrap}

.post ol.steps{list-style:none;counter-reset:s;padding:0;margin:18px 0 0}
.post ol.steps li{counter-increment:s;position:relative;padding:12px 0 12px 46px;border-top:1px solid var(--line);font-size:17px;line-height:1.7}
.post ol.steps li::before{content:counter(s);position:absolute;left:0;top:12px;width:30px;height:30px;background:var(--ink);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}

.post ol.steps+p{margin-top:18px}
.post ul.links{list-style:none;padding:0;margin:0}
.post ul.links li{padding:10px 0;border-top:1px solid var(--line);font-size:17px}

.post .close{text-align:center;padding:8px 0}
.post .close p{color:var(--ink-2)}
.post .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.post .cta-row a{display:inline-flex;align-items:center;font-size:15px;font-weight:800;padding:13px 24px;text-decoration:none;border:1.5px solid var(--accent)}
.post .cta-row a.primary{background:var(--accent);color:#fff}
.post .cta-row a.ghost{background:#fff;color:var(--accent)}

/* 글 목록 */
.post-list{list-style:none;padding:0;margin:0}
.post-list li{border-bottom:1px solid var(--line)}
.post-list a{display:block;padding:28px 0;text-decoration:none;color:var(--ink)}
.post-list .tag{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--accent)}
.post-list h2{font-size:clamp(20px,2.6vw,24px);margin:6px 0 8px}
.post-list p{font-size:16px;color:var(--ink-2);margin:0}
.post-list a:hover h2{text-decoration:underline;text-underline-offset:4px}

@media(max-width:560px){
  .blog-hero{padding:110px 0 44px}
  .post{padding:0 20px}
  .post section{padding:36px 0}
  .post tbody th{white-space:normal}
}