/* 인사이트 글 — 시안(docs/design/2026-10-23-dark-editorial/site.html) 의 글 전용 규칙.
   공통 규칙(경로 .crumbs·재단선 그림·문의 띠)은 base.css */

.post-head { padding-block: clamp(64px, 9vw, 128px) clamp(48px, 6vw, 80px); }
.post-head h1 { margin: clamp(32px, 5vw, 64px) 0 20px; font-size: clamp(38px, 6vw, 88px); letter-spacing: -0.06em; line-height: 1.05; font-weight: 700; max-width: 16ch; }
.post-head .meta { display: flex; gap: 24px; color: var(--sub); font-size: 14px; }
/* 표지는 글자가 든 그림이 많아 자르지 않는다 — 원래 비율 그대로(width·height 속성이 자리를 잡는다), 폭은 본문 쪽에 맞춰 상한 */
.post-cover .crop { max-width: 1040px; }
.post-cover figure { overflow: hidden; border-radius: 3px; margin: 0; }
.post-cover img { width: 100%; height: auto; }
.post-cover img:not([width]) { aspect-ratio: 16 / 9; object-fit: contain; background: var(--bg2); }
.post-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; padding-block: clamp(72px, 9vw, 128px); }
.post-body aside { grid-column: 1 / span 3; color: var(--sub); font-size: 13px; position: sticky; top: 96px; align-self: start; }
.post-body aside ol { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.post-body aside a:hover { color: var(--ink); }

/* 본문 — API 렌더러(apps/api/src/lib/render-content.ts)가 만드는 태그만 온다:
   p, h2, h3, ul/ol > li > p, blockquote, hr, br, img(감싸는 태그 없이), strong, em, u, a. 시안의 .prose 에 이 태그들의 규칙을 더했다 */
.prose { grid-column: 4 / span 7; font-size: 17.5px; line-height: 1.95; color: #cfd3e1; max-width: 68ch; min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.3em; }
.prose h2 { margin: 2.4em 0 .8em; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.045em; line-height: 1.3; color: var(--ink); scroll-margin-top: 96px; } /* 차례 링크로 왔을 때 머리에 가리지 않게 */
.prose h3 { margin: 2em 0 .6em; font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -0.04em; line-height: 1.4; color: var(--ink); }
.prose h2 + h3 { margin-top: 1.2em; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover { color: var(--blue); }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.prose li::marker { color: var(--sub); }
.prose li p { margin: 0 0 .4em; }
.prose blockquote { margin: 2em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--blue); color: var(--ink); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { margin: 3em 0; border: 0; border-top: 1px solid var(--line2); }
.prose > img { margin: 2em 0; border-radius: 3px; } /* 크기는 width 속성(가져온 글은 옛 표시 폭), 칸을 넘지 않는다 (base.css img) */
.prose > img + img { margin-top: -1em; }

.post-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line2); }
.post-nav a { padding: 32px 0; display: grid; gap: 6px; }
.post-nav a + a { text-align: right; border-left: 1px solid var(--line); padding-left: 24px; }
.post-nav strong { font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.04em; }
.post-nav a:hover strong { color: var(--blue); }

@media (max-width: 960px) {
  .post-body aside { display: none; }
  .prose { grid-column: 1 / -1; }
}