/* ============================================================
   SPACE & CO. — 블로그 (스페이스엔코 이야기 / 시공사례)
   style.css의 토큰(--ivory·--ink·네이비 #16314f·Pretendard) 재사용.
   리스트(카드 그리드) + 상세(아티클) 공용 스타일.
   hover = 테두리 색만 (모션 X — 형 룰).
   ============================================================ */

:root{
  --navy: #16314f;
  --navy-soft: #41506a;
  --navy-mute: #6b7d96;
  --blog-line: rgba(22,49,79,0.12);
}

body.blog{ background:#e9f2fb url(../images/page-bg.png) center/cover fixed; color:var(--ink); }

/* ---- 상단 서브 네비 (블로그 공용) ---- */
.sub-nav{
  position:fixed; left:0; right:0; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad-x);
  background:rgba(249,249,249,0.88); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--blog-line);
}
.sub-nav .nav-logo{ font-family:var(--serif); font-weight:700; letter-spacing:-0.02em; font-size:20px; color:var(--navy); mix-blend-mode:normal; }
.sub-nav .sub-links{ display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); }
.sub-nav .sub-links a{ font-size:13px; font-weight:600; color:var(--navy); transition:opacity .25s; }
.sub-nav .sub-links a.is-active{ color:var(--navy); border-bottom:2px solid var(--navy); padding-bottom:3px; }
.sub-nav .sub-links a:hover{ opacity:.55; }
.sub-nav .sub-links a.is-active{ color:var(--navy); border-bottom:2px solid var(--navy); padding-bottom:3px; }
/* 전체 카테고리 메뉴 + 견적 CTA + 모바일 햄버거 */
.sub-nav-actions{ display:flex; align-items:center; gap:clamp(12px,1.6vw,20px); }
.sub-cta{ display:inline-flex; align-items:center; padding:10px 20px; background:var(--navy); color:#fff; font-size:13px; font-weight:700; letter-spacing:.01em; transition:transform .25s var(--ease), background .25s var(--ease); }
.sub-cta:hover{ background:#0f2438; transform:translateY(-1px); }
.sub-toggle{ display:none; }
@media (max-width:980px){
  .sub-nav .sub-links{ display:none; }
  .sub-cta{ display:none; }
  .sub-toggle{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:34px; height:34px; padding:0; background:none; border:none; cursor:pointer; }
  .sub-toggle span{ display:block; width:24px; height:2px; background:var(--navy); transition:background .3s; }
}

/* ---- 블로그 헤더 ---- */
.blog-hero{ padding:140px var(--pad-x) 48px; max-width:1180px; margin:0 auto; }
.blog-hero .eyebrow{ display:inline-block; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--navy-mute); margin-bottom:14px; }
.blog-hero h1{ font-family:var(--sans); font-weight:800; font-size:clamp(36px,5.5vw,68px); line-height:1.02; letter-spacing:-0.035em; color:var(--navy); margin:0 0 18px; }
.blog-hero p{ font-size:clamp(14px,1.5vw,17px); line-height:1.7; color:var(--navy-soft); max-width:560px; margin:0; }

/* 카테고리 탭 (이야기 / 시공사례 전환) */
.blog-tabs{ display:flex; gap:10px; margin-top:30px; flex-wrap:wrap; }
.blog-tabs a{ font-size:14px; font-weight:700; padding:10px 20px; border-radius:999px; border:1px solid var(--blog-line); color:var(--navy-soft); background:#fff; transition:border-color .25s, color .25s; }
.blog-tabs a.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.blog-tabs a:not(.is-active):hover{ border-color:var(--navy); color:var(--navy); }

/* ---- 글 목록 그리드 ---- */
.post-grid{ max-width:1180px; margin:0 auto; padding:8px var(--pad-x) 100px; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:980px){ .post-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }
@media (max-width:620px){ .post-grid{ grid-template-columns:1fr; } }

.post-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--blog-line); border-radius:16px; overflow:hidden; box-shadow:0 8px 26px rgba(22,49,79,0.06); transition:border-color .3s var(--ease); }
.post-card:hover{ border-color:rgba(22,49,79,0.30); }
.post-card .media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#dfe4ea; }
.post-card .media video, .post-card .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.post-card .cat{ position:absolute; top:12px; left:12px; z-index:2; font-size:11px; font-weight:700; letter-spacing:.04em; color:#fff; background:rgba(22,49,79,0.82); padding:5px 11px; border-radius:999px; backdrop-filter:blur(2px); }
.post-card .body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card .date{ font-size:12px; color:var(--navy-mute); letter-spacing:.02em; }
.post-card h3{ font-family:var(--sans); font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-0.01em; color:var(--navy); margin:0; }
.post-card .excerpt{ font-size:13.5px; line-height:1.65; color:var(--navy-soft); margin:0; }
.post-card .tags{ margin-top:auto; padding-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.post-card .tags span{ font-size:11.5px; color:var(--navy-mute); }

/* ---- 글 상세 (아티클) ---- */
.article{ max-width:780px; margin:0 auto; padding:130px var(--pad-x) 40px; }
.article .a-cat{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--navy-mute); margin-bottom:14px; }
.article h1{ font-family:var(--sans); font-weight:800; font-size:clamp(30px,4.4vw,50px); line-height:1.18; letter-spacing:-0.03em; color:var(--navy); margin:0 0 18px; }
.article .a-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid var(--blog-line); margin-bottom:34px; }
.article .a-meta .date{ font-size:13px; color:var(--navy-mute); }
.article .a-meta .tag{ font-size:12.5px; color:var(--navy); background:rgba(22,49,79,0.07); padding:4px 10px; border-radius:999px; }

.article-body{ font-size:16.5px; line-height:1.85; color:#23303f; }
.article-body > * + *{ margin-top:22px; }
.article-body h2{ font-family:var(--sans); font-size:24px; font-weight:800; letter-spacing:-0.02em; color:var(--navy); margin-top:46px; }
.article-body p{ margin:0; }
.article-body strong{ color:var(--navy); font-weight:700; }
.article-body figure{ margin:34px 0; }
.article-body figure video, .article-body figure img{ width:100%; border-radius:14px; display:block; box-shadow:0 14px 40px rgba(22,49,79,0.14); background:#dfe4ea; }
.article-body figcaption{ margin-top:12px; font-size:13px; color:var(--navy-mute); text-align:center; }

/* 본문 끝 — 태그 + CTA + 목록 이동 */
.article-foot{ max-width:780px; margin:48px auto 0; padding:0 var(--pad-x); }
.article-foot .a-tags{ display:flex; flex-wrap:wrap; gap:8px; padding-top:28px; border-top:1px solid var(--blog-line); }
.article-foot .a-tags a{ font-size:13px; font-weight:600; color:var(--navy); background:rgba(22,49,79,0.06); padding:7px 14px; border-radius:999px; transition:background .25s; }
.article-foot .a-tags a:hover{ background:rgba(22,49,79,0.13); }
.article-cta{ max-width:780px; margin:46px auto 0; padding:36px var(--pad-x); }
.article-cta .box{ background:var(--ivory); border-radius:16px; padding:38px 34px; text-align:center; }
.article-cta h3{ font-family:var(--sans); font-weight:800; font-size:clamp(22px,3vw,30px); color:var(--navy); margin:0 0 10px; letter-spacing:-0.02em; }
.article-cta p{ font-size:14.5px; color:var(--navy-soft); margin:0 0 22px; }
.article-cta .actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.article-cta .btn.primary{ background:var(--navy); color:#fff; }
.article-cta .btn.primary:hover{ background:#0f2438; }
.article-cta .btn.ghost{ background:transparent; color:var(--navy); border-color:rgba(22,49,79,0.4); }
.article-cta .btn.ghost:hover{ background:var(--navy); color:#fff; }

/* 빈 목록 (준비 중) */
.blog-empty{ max-width:1180px; margin:0 auto; padding:30px var(--pad-x) 120px; text-align:center; }
.blog-empty p{ font-size:15px; color:var(--navy-soft); }