/* 블로그 본문 서식 — 공개 상세(/blog/{slug})와 앱의 제품 생성 대기 화면(VocAnalysisWaiting)이 **같이 읽는다**
   (2026-10-14 detail.css 에서 분리). 두 화면의 글이 똑같아야 하므로 서식은 여기 한 곳에만 둔다.
   토큰(--ink/--green/--line …)은 블로그는 common.css :root, 앱은 .blog-embed 가 정의한다.
   선택자는 전부 .article-body 아래로 묶었다 — 앱 전역 클래스와 부딪히지 않게.
   색은 **변수로만** 쓴다 — 앱은 다크 모드에서 변수 값만 바꿔 같은 서식을 어둡게 그린다. 새 규칙에 색을
   직접 적으면 앱 다크 모드에서 그 자리만 밝게 남는다. (--code-bg 는 앱 다크용 — 블로그는 --dark 로 떨어진다.) */
.article-body{display:flex;flex-direction:column;gap:16px;min-width:0}
.article-body p{font-size:clamp(16px,2vw,18px);font-weight:300;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}
.article-body h2{font-size:clamp(22px,3vw,28px);font-weight:600;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}
.article-body .h-group{display:flex;flex-direction:column;gap:16px}
.article-body figure img{width:100%;border-radius:8px}
/* ---------- 본문 — 마크다운이 뱉는 나머지 요소 ---------- */
/* 시안 본문은 p·h2·figure 만 다뤘다. 실제 글은 마크다운으로 쓰므로 h3·목록·표·인용·
   코드가 함께 나온다. 시안의 토큰(--ink/--muted/--green/--line)과 굵기 체계를 그대로
   따라 확장한다 — 새 색을 만들지 않는다. */
.article-body h3{font-size:clamp(18px,2.4vw,22px);font-weight:600;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}
.article-body h4{font-size:clamp(16px,2vw,18px);font-weight:600;line-height:1.5;letter-spacing:-.025em;color:var(--ink)}
.article-body strong,.article-body b{font-weight:600}
.article-body a{color:var(--green);text-decoration:inherit;text-underline-offset:3px;font-size:16px;cursor:pointer}
.article-body a:hover{opacity:.75}
.article-body ul,.article-body ol{padding-left:22px;display:flex;flex-direction:column;gap:8px}
.article-body li{font-size:clamp(16px,2vw,18px);font-weight:300;line-height:1.6;letter-spacing:-.025em;color:var(--ink)}
.article-body li::marker{color:var(--muted-2)}
.article-body li>ul,.article-body li>ol{margin-top:8px}
.article-body blockquote{border-left:3px solid var(--green);background:var(--bg-mint);border-radius:0 8px 8px 0;padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.article-body blockquote p{color:var(--dark)}
.article-body hr{border:none;border-top:1px solid var(--line-soft)}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--bg-mint);border:1px solid var(--line-soft);border-radius:4px;padding:2px 5px;color:var(--dark)}
.article-body pre{background:var(--code-bg,var(--dark));border-radius:8px;padding:20px 24px;overflow-x:auto}
.article-body pre code{background:none;border:none;padding:0;color:#e9ecea;font-size:14px;line-height:1.7}
/* 표는 좁은 화면에서 페이지를 가로로 밀지 않고 표 안에서만 스크롤되어야 한다. */
.article-body .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-body table{width:100%;border-collapse:collapse;font-size:15px;min-width:480px}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 14px;text-align:left;letter-spacing:-.025em}
/* 열 정렬(`|---:|`)은 align 속성으로 들어온다 — 숫자 열을 오른쪽에 맞추는 용도.
   브라우저 기본 해석에 기대지 않고 명시한다. 숫자는 자릿수가 맞아야 읽힌다. */
.article-body th[align="right"],.article-body td[align="right"]{text-align:right;font-variant-numeric:tabular-nums}
.article-body th[align="center"],.article-body td[align="center"]{text-align:center}
.article-body th[align="left"],.article-body td[align="left"]{text-align:left}
.article-body th{background:var(--bg-mint);font-weight:600;color:var(--ink)}
.article-body td{font-weight:300;color:var(--ink)}
.article-body figcaption{font-size:14px;font-weight:300;color:var(--muted);letter-spacing:-.025em;margin-top:10px;text-align:center}
.article-body img{border-radius:8px;width:100%;padding:40px 0}

/* ---------- 본문 상단 핵심 요약 (GEO) ---------- */
/* 생성형 검색이 인용하기 좋게 결론을 먼저 놓는 블록. 본문 첫 요소로 렌더된다. */
.article-body .answer-summary{background:var(--bg-mint);border:1px solid rgba(0,151,75,.25);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px}
.article-body .answer-summary .label{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--green);text-transform:uppercase}
.article-body .answer-summary p{font-size:clamp(15px,2vw,17px);font-weight:400;line-height:1.65;color:var(--dark)}

/* ---------- 목차 ----------
   `cb8d9d3`(시안 840-3010) 에서 템플릿과 함께 빠졌다가 복구. 서버는 그동안에도 계속
   목차를 만들어 내려보내고 있었다(`blog_render.render_markdown` → `post.toc`,
   templates/blog/detail.html). 두 번째 유실이라 지우기 전에 템플릿부터 확인할 것.
   `.label` 은 `.answer-summary .label` 과 이름이 같지만 둘 다 후손 선택자라 안 부딪힌다. */
.article-body .toc{border:1px solid var(--line);border-radius:12px;padding:20px 24px;display:flex;flex-direction:column;gap:10px}
.article-body .toc .label{font-size:13px;font-weight:600;letter-spacing:-.025em;color:var(--muted)}
.article-body .toc ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.article-body .toc li{font-size:15px;font-weight:300;line-height:1.5}
.article-body .toc li.lv3{padding-left:14px}
.article-body .toc a{color:var(--ink)}
.article-body .toc a:hover{color:var(--green)}


@media(max-width:520px){
  .article-body .answer-summary{padding:16px;gap:4px}
  .article-body .toc{padding:16px}
  .article-body .toc ol{gap:4px}
  .article-body .toc a{font-size:15px}
}