/* =====================================================================
   블로그 v2 — 홈 디자인 체계(body.theme-green)를 쓰는 블로그 페이지 전용

   누가 불러오나
   - /blog/ 목록          <body class="theme-green blog-index">
   - 2026-10 이후 신규 글 <body class="theme-green blog-post">
   - 루트 페이지 — 한미 양국 CPA·접근성(blog-post page-article), 진단 도구(blog-post page-tool), 404(page-404)   (템플릿: docs/templates/blog-post.html — docs/ 는 웹에서 막혀 있다)

   누가 안 불러오나
   - 기존 글 72편은 /blog/blog.css(남색)를 그대로 쓴다. 이 파일을 건드려도 기존 글은 바뀌지 않는다.
   - 홈은 이 파일을 부르지 않는다.

   색·모서리·그림자는 style.css 의 body.theme-green 토큰만 쓴다. 투명도 변형은 color-mix 로
   토큰에서 만든다(새 색을 들이지 않는다). 헤더·버튼·푸터·카드는 style.css 가 이미 그린다.
   ===================================================================== */

/* ── 공통: 페이지 바탕 ── */
body.blog-index,
body.blog-post,
body.page-404 {
  background: var(--surface);
  color: var(--text);
  word-break: keep-all;
}

body.blog-index h1,
body.blog-post h1 {
  text-wrap: balance;
}

body.theme-green .keep {
  white-space: nowrap;
}

/* ── 공통: 짙은 녹색 행동 띠 (목록 하단·글 하단) — 홈 무료 진단 띠와 같은 면 ── */
body.theme-green .cta-band {
  background: var(--green-950);
  padding: 80px 0;
}

body.theme-green .cta-band h2 {
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0;
  max-width: 22em;
}

body.theme-green .cta-band p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--on-dark-muted);
  color: color-mix(in srgb, var(--cream) 85%, transparent);
  margin: 16px 0 0;
  max-width: 40em;
}

body.theme-green .cta-band p a {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.theme-green .cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-top: 32px;
}

body.theme-green .cta-band .btn-primary {
  background: var(--cream);
  color: var(--green-700);
  border-color: transparent;
}

body.theme-green .cta-band .btn-primary:hover {
  background: var(--surface);
}

body.theme-green .cta-band .btn-outline-light {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--cream) 45%, transparent);
  color: var(--cream);
}

body.theme-green .cta-band .btn-outline-light:hover {
  border-color: var(--cream);
  background: color-mix(in srgb, var(--cream) 10%, transparent);
}

/* ── 페이지 머리 (목록·404) ── */
body.theme-green .page-head {
  background: var(--surface-alt);
  padding: 88px 0 72px;
}

body.theme-green .eyebrow-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-700);
  margin: 0 0 16px;
}

body.theme-green .page-head h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

body.theme-green .page-head .lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 16px 0 0;
  max-width: 36em;
}

/* ── 목록: 구역 ── */
body.theme-green .blog-section {
  padding: 80px 0;
}

body.theme-green .blog-section + .blog-section {
  border-top: 1px solid var(--rule);
}

body.theme-green .blog-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 32px;
}

body.theme-green .blog-section-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

body.theme-green .blog-section-head .count {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* 표지 카드 — 홈 인사이트 카드와 같은 부품(style.css .post-cards). 여기서는 옛 blog.css 가 주던 기본값만 채운다 */
body.blog-index .post-cards .blog-grid {
  display: grid;
}

body.blog-index .post-cards .blog-card {
  text-decoration: none;
  color: inherit;
}

body.blog-index .post-cards .blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.blog-index .post-cards .blog-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 160ms ease;
}

body.blog-index .post-cards .blog-card:hover h3 {
  color: var(--green-700);
}

body.blog-index .post-cards .blog-card p {
  color: var(--muted);
  line-height: 1.6;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 지난 글 — 표지 없이 한 줄씩 읽히는 목록(홈의 헤어라인 행과 같은 어휘) */
body.blog-index .post-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

body.blog-index .post-row {
  border-bottom: 1px solid var(--rule);
}

body.blog-index .post-row a {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: 4px 32px;
  align-items: baseline;
  padding: 24px 0;
  color: inherit;
  text-decoration: none;
}

body.blog-index .post-row-meta {
  display: grid;
  gap: 2px;
  font-size: 0.8125rem;
  color: var(--muted);
  grid-row: span 2;
}

body.blog-index .post-row-category {
  font-weight: 600;
  color: var(--green-700);
}

body.blog-index .post-row h3 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  transition: color 160ms ease;
}

body.blog-index .post-row p {
  grid-column: 2;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.blog-index .post-row-arrow {
  grid-column: 3;
  grid-row: 1;
  color: var(--green-700);
  transition: transform 200ms var(--ease-out);
}

body.blog-index .post-row a:hover h3 {
  color: var(--green-700);
}

body.blog-index .post-row a:hover .post-row-arrow {
  transform: translateX(4px);
}

body.blog-index .post-row a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* ── 글: 머리 — 짙은 녹색 띠, 왼쪽 정렬 ── */
body.blog-post .post-hero {
  background: var(--green-900);
  padding: 72px 0 64px;
}

body.blog-post .post-hero .eyebrow-line {
  color: color-mix(in srgb, var(--cream) 80%, transparent);
}

body.blog-post .post-hero .eyebrow-line a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 40%, transparent);
}

body.blog-post .post-hero .eyebrow-line a:hover {
  border-bottom-color: var(--cream);
}

body.blog-post .post-hero h1 {
  font-size: clamp(1.875rem, 3.6vw, 2.875rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  margin: 0;
  max-width: 22em;
}

body.blog-post .post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  font-size: 0.9375rem;
  color: var(--on-dark-muted);
}

body.blog-post .post-meta a {
  color: var(--on-dark);
  font-weight: 600;
  text-decoration: none;
}

body.blog-post .post-meta a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── 글: 본문 + 옆 목차 ── */
body.blog-post .post-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) 272px;
  justify-content: space-between;
  gap: 64px;
  padding-top: 56px;
  padding-bottom: 88px;
}

body.blog-post .post-aside {
  position: sticky;
  top: 104px;
  align-self: start;
  display: grid;
  gap: 24px;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.blog-post .post-aside-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-700);
  margin: 0 0 12px;
}

body.blog-post .post-toc[hidden] {
  display: none;
}

body.blog-post .post-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
}

body.blog-post .post-toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}

body.blog-post .post-toc a:hover {
  color: var(--ink);
}

body.blog-post .post-toc a[aria-current="true"] {
  color: var(--green-700);
  border-left-color: var(--green-700);
  font-weight: 600;
}

body.blog-post .post-aside-cta {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 20px;
  background: var(--surface-warm);
}

body.blog-post .post-aside-cta p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px;
}

body.blog-post .post-aside-cta .post-aside-title {
  margin-bottom: 8px;
}

body.blog-post .post-aside-cta .btn {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 0.9375rem;
  padding: 10px 14px;
}

body.blog-post .post-aside-cta .btn + .btn {
  margin-top: 8px;
}

/* ── 글: 본문 타이포그래피 ── */
body.blog-post .blog-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

body.blog-post .blog-content > * + * {
  margin-top: 1.1em;
}

/* 문단 여백은 가볍게(:where) — 목록·표 뒤에 오는 문단이 위 간격 규칙을 받게 */
:where(body.blog-post .blog-content) p {
  margin: 0;
}

body.blog-post .blog-content p + p {
  margin-top: 1.1em;
}

body.blog-post .blog-content h2 {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 64px 0 20px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 104px;
}

body.blog-post .blog-content h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  margin: 40px 0 12px;
  scroll-margin-top: 104px;
}

body.blog-post .blog-content h2 + h3 {
  margin-top: 24px;
}

body.blog-post .blog-content strong {
  font-weight: 600;
  color: var(--ink);
}

body.blog-post .blog-content .tech {
  font-weight: inherit;
}

body.blog-post .blog-content a {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--green-700) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms ease;
}

body.blog-post .blog-content a:hover {
  text-decoration-color: var(--green-700);
}

/* 목록 — 홈과 같은 작은 녹색 점 */
body.blog-post .blog-content ul,
body.blog-post .blog-content ol {
  margin: 1.1em 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

body.blog-post .blog-content ul {
  list-style: none;
}

body.blog-post .blog-content ul > li {
  position: relative;
  padding-left: 20px;
}

body.blog-post .blog-content ul > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.78em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
}

body.blog-post .blog-content ul.checklist > li::before {
  top: 0.5em;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-xs);
  background: transparent;
  border: 1.5px solid var(--green-700);
}

body.blog-post .blog-content ol {
  padding-left: 1.4em;
}

body.blog-post .blog-content ol > li::marker {
  color: var(--green-700);
  font-weight: 600;
}

/* 인용 — 상자 없이 굵은 한 줄 */
body.blog-post .blog-content blockquote {
  margin: 40px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--green-700);
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--ink);
}

body.blog-post .blog-content blockquote p + p {
  margin-top: 0.6em;
}

/* 강조 상자 */
body.blog-post .blog-content .callout {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--green-50);
  border-radius: var(--radius-md);
}

body.blog-post .blog-content .callout > :first-child {
  margin-top: 0;
}

/* 핵심 요약(Quick Answer) — 글 맨 위, 첫 단락만 읽고 나가도 답을 얻는 자리 */
body.blog-post .blog-content #section-qa {
  margin: 0 0 8px;
}

body.blog-post .blog-content #section-qa .callout {
  margin: 0;
  padding: 28px 32px;
  background: var(--surface-warm);
  border: 1px solid var(--rule-strong);
}

body.blog-post .blog-content #section-qa .callout > strong:first-child {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-700);
  margin-bottom: 12px;
}

body.blog-post .blog-content #section-qa .callout li strong:first-child {
  display: block;
  margin-bottom: 2px;
}

/* 표 */
body.blog-post .blog-content table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.6;
}

body.blog-post .blog-content caption {
  caption-side: top;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 12px;
}

body.blog-post .blog-content th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  background: var(--green-50);
  padding: 12px 14px;
  border-bottom: 1px solid var(--green-700);
  vertical-align: bottom;
}

body.blog-post .blog-content td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

body.blog-post .blog-content th:first-child,
body.blog-post .blog-content td:first-child {
  min-width: 6.5em;
}

body.blog-post .blog-content tbody tr:last-child td {
  border-bottom-color: var(--rule-strong);
}

body.blog-post .blog-content .table-wrap {
  overflow-x: auto;
  margin: 32px 0;
}

body.blog-post .blog-content .table-wrap table {
  margin: 0;
}

/* 그림 — 다이어그램은 흰 면에 얇은 테두리, 표지는 테두리 없이 */
body.blog-post .blog-content .blog-figure {
  margin: 40px 0;
  padding: 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface);
}

body.blog-post .blog-content .blog-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
  margin: 0 auto;
}

body.blog-post .blog-content .figure-caption,
body.blog-post .blog-content figcaption {
  margin: 16px 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

body.blog-post .blog-content .blog-figure.blog-cover {
  margin: 0 0 40px;
  padding: 0;
  border: 0;
  overflow: hidden;
}

body.blog-post .blog-content .blog-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

/* 함께 읽으면 좋은 글 — scripts/build_related_posts.py 가 마크업을 만든다. 홈의 헤어라인 행 */
body.blog-post .related-posts {
  margin-top: 72px;
}

body.blog-post .related-posts h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-700);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

body.blog-post .related-posts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

/* 항목 뒤에 붙는 짧은 설명(한미 양국 CPA 페이지)은 흐린 작은 글자로 */
body.blog-post .related-posts li {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
  color: var(--muted);
  font-size: 0.9375rem;
}

body.blog-post .related-posts a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease;
}

body.blog-post .related-posts a::after {
  content: "→";
  flex: none;
  color: var(--green-700);
  transition: transform 200ms var(--ease-out);
}

body.blog-post .related-posts a:hover {
  color: var(--green-700);
}

body.blog-post .related-posts a:hover::after {
  transform: translateX(4px);
}

/* ── 한 칸 레이아웃 — 옆 목차 없이 본문만(접근성·진단 도구). 머리 제목과 같은 왼쪽 선에 맞춘다 ── */
body.blog-post .post-layout--single {
  grid-template-columns: minmax(0, 760px);
  justify-content: start;
}

/* 진단 도구는 입력칸·표가 있어 옛 화면과 같은 폭으로 넓게 */
body.page-tool .post-layout--single {
  grid-template-columns: minmax(0, 880px);
}

/* 본문 중간 상담 상자 — 한미 양국 CPA 페이지. 계측(track-contact.js)이 .blog-post-cta 를 읽으므로 클래스는 그대로 둔다 */
body.blog-post .blog-content .blog-post-cta {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--green-50);
  border-radius: var(--radius-md);
  display: grid;
  gap: 16px;
  justify-items: start;
}

body.blog-post .blog-content .blog-post-cta p {
  margin: 0;
}

body.blog-post .blog-content .blog-post-cta .btn,
body.blog-post .blog-content p > .btn-primary {
  background: var(--green-700);
  color: var(--on-dark);
  text-decoration: none;
  border-color: transparent;
}

body.blog-post .blog-content .blog-post-cta .btn:hover,
body.blog-post .blog-content p > .btn-primary:hover {
  background: var(--green-900);
}

/* ── 404 ── */
body.page-404 .page-head {
  padding-top: 112px;
}

body.theme-green .link-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  max-width: 720px;
}

body.theme-green .link-rows li {
  border-bottom: 1px solid var(--rule);
}

body.theme-green .link-rows a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease;
}

body.theme-green .link-rows a::after {
  content: "→";
  color: var(--green-700);
  transition: transform 200ms var(--ease-out);
}

body.theme-green .link-rows a:hover {
  color: var(--green-700);
}

body.theme-green .link-rows a:hover::after {
  transform: translateX(4px);
}

body.theme-green .page-note {
  margin: 32px 0 0;
  color: var(--muted);
}

body.theme-green .page-note a {
  color: var(--green-700);
  text-underline-offset: 3px;
}

/* ── 반응형 ── */
@media (max-width: 1080px) {
  body.blog-post .post-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }

  body.blog-post .post-aside {
    display: none;
  }
}

@media (max-width: 720px) {
  body.theme-green .page-head {
    padding: 56px 0 48px;
  }

  body.theme-green .blog-section {
    padding: 56px 0;
  }

  body.blog-index .post-row a {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    padding: 20px 0;
  }

  body.blog-index .post-row-meta {
    grid-row: auto;
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
  }

  body.blog-index .post-row p {
    grid-column: 1 / -1;
    -webkit-line-clamp: 2;
  }

  body.blog-index .post-row-arrow {
    grid-row: 2;
    grid-column: 2;
  }

  body.blog-post .post-hero {
    padding: 48px 0 40px;
  }

  body.blog-post .post-layout {
    padding-top: 32px;
    padding-bottom: 56px;
  }

  body.blog-post .blog-content {
    font-size: 1rem;
    line-height: 1.8;
  }

  body.blog-post .blog-content h2 {
    font-size: 1.375rem;
    margin-top: 48px;
    padding-top: 24px;
  }

  body.blog-post .blog-content #section-qa .callout,
  body.blog-post .blog-content .callout {
    padding: 20px;
  }

  body.blog-post .blog-content .blog-figure {
    padding: 16px;
  }

  body.blog-post .blog-content table {
    display: block;
    overflow-x: auto;
  }

  body.theme-green .cta-band {
    padding: 56px 0;
  }

  body.theme-green .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}