/* ============================================================
   blog.css — 블로그 전용 최소 스타일
   ------------------------------------------------------------
   · 블로그 페이지(blog/*.html)에서만 로드된다. 홈(index.html)에는
     연결되어 있지 않으므로 홈 디자인에 영향이 없다.
   · 색·폰트·간격은 style.css의 기존 변수를 그대로 쓴다.
     새 디자인 언어를 만들지 않는다(디자인 보호 규칙).
   ============================================================ */

/* 블로그 헤더는 CTA만 있고 모바일 토글 버튼이 없어 3열로 맞춘다.
   `:has()` 같은 최신 선택자에 기대지 않는다 — 구형 브라우저에서 규칙이 통째로
   무시되면 아래 전화 버튼 보호까지 같이 날아가기 때문이다.
   빌더가 붙여주는 .blog-nav-wrap / .blog-header 클래스로만 판단한다. */
.blog-nav-wrap {
  grid-template-columns: auto 1fr auto;
}

/* 🔴 모바일에서 전화 버튼이 사라지는 것을 막는다.
   style.css의 @media(max-width:1040px)는 .main-nav 와 .nav-cta 를 함께 숨기고
   햄버거 버튼(.menu-toggle)이 그 둘을 대신하게 되어 있다. 그런데 블로그 헤더에는
   그 햄버거 버튼이 없다(홈 전용 main.js를 로드하지 않기 때문). 그대로 두면
   휴대폰에서 로고만 남고 전화 버튼까지 사라져 문의 경로가 끊긴다.
   이 사이트는 "노출 → 문의"가 존재 이유라 이건 그냥 두면 안 되는 결함이다.
   → 블로그 헤더에서는 모바일에서도 전화 CTA를 반드시 남긴다.
   (메뉴 링크는 자리 부족으로 계속 숨기고, 이동은 로고와 푸터가 담당한다.) */
@media (max-width: 1040px) {
  .blog-nav-wrap {
    grid-template-columns: auto 1fr auto;
    min-height: 68px;
  }

  .blog-nav-wrap .nav-cta {
    display: inline-flex;
    padding: 9px 16px;
    font-size: 0.82rem;
  }
}

@media (max-width: 420px) {
  .blog-nav-wrap .nav-cta {
    padding: 8px 12px;
    font-size: 0.76rem;
  }
}

.main-nav a.is-active {
  color: var(--brand);
  font-weight: 700;
}

/* ── 공통 래퍼 ── */
.post-main {
  padding: 56px 0 24px;
  background: var(--surface);
}

/* ── 글 상세 ── */
.post {
  max-width: 760px;
}

.post h1 {
  margin: 6px 0 14px;
  font-size: clamp(1.65rem, 1.15rem + 1.9vw, 2.5rem);
  line-height: 1.32;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}

.post .eyebrow a {
  text-decoration: none;
}

.post .eyebrow a:hover {
  text-decoration: underline;
}

.post-meta {
  margin-bottom: 34px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 0.9rem;
}

.post h2 {
  margin: 46px 0 16px;
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.post h3 {
  margin: 32px 0 12px;
  font-size: 1.1rem;
  color: var(--ink-900);
}

.post p {
  margin-bottom: 20px;
  font-size: 1.03rem;
  line-height: 1.95;
  color: var(--ink-700);
}

.post p strong {
  color: var(--ink-900);
  font-weight: 700;
}

.post p em {
  color: var(--ink-500);
  font-style: normal;
  font-size: 0.94rem;
}

.post a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.post a:hover {
  color: var(--accent);
}

.post-sep {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* ── 본문 사진 (글과 독립된 보조 컷 — 2026-08-24) ── */
.post-img {
  margin: 32px 0;
  text-align: center;
}

.post-img img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ── 저자 카드 (전환 경로: 글 → 소개 → 전화) ── */
.author-card {
  margin: 48px 0 8px;
  padding: 26px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.author-name {
  margin-bottom: 6px;
  color: var(--ink-900);
  font-weight: 700;
}

.author-bio {
  margin-bottom: 10px;
  color: var(--ink-500);
  font-size: 0.94rem;
  line-height: 1.75;
}

.author-link a {
  color: var(--brand);
  font-weight: 500;
  font-size: 0.94rem;
  text-decoration: none;
}

.author-link a:hover {
  color: var(--accent);
}

.post-back {
  margin: 30px 0 10px;
  font-size: 0.94rem;
}

.post-back a {
  color: var(--ink-500);
  text-decoration: none;
}

.post-back a:hover {
  color: var(--brand);
}

/* ── 글 목록 ── */
.blog-index-title {
  margin: 6px 0 12px;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  color: var(--ink-900);
  letter-spacing: -0.02em;
}

.blog-index-lead {
  max-width: 640px;
  margin-bottom: 44px;
  color: var(--ink-500);
  font-size: 1.02rem;
  line-height: 1.85;
}

.post-list {
  display: grid;
  gap: 18px;
  padding-bottom: 20px;
}

.post-card {
  padding: 28px 30px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.post-card-kw {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.post-card h2 {
  margin-bottom: 10px;
  font-size: 1.24rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.post-card h2 a {
  color: var(--ink-900);
  text-decoration: none;
}

.post-card:hover h2 a {
  color: var(--brand);
}

.post-card-desc {
  margin-bottom: 12px;
  color: var(--ink-500);
  font-size: 0.96rem;
  line-height: 1.8;
}

.post-card-date {
  color: var(--ink-500);
  font-size: 0.84rem;
}

@media (min-width: 860px) {
  .post-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 720px) {
  .post-main {
    padding-top: 34px;
  }

  .post h2 {
    margin-top: 36px;
  }

  .post p {
    font-size: 1rem;
    line-height: 1.9;
  }

  .author-card,
  .post-card {
    padding: 22px 20px;
  }
}