/* 블로그 글 (/blog/{slug}) — 본문 36em, 한국어 본문 18px / 1.9. 첫 인용 하나만 본문 폭을 벗어나 크게.
   본문은 네이버 블로그에서 옮긴 HTML(h3 · p · blockquote · figure · hr) 그대로 — 한 줄이 한 문단이라 문단 사이를 좁게 */
.measure { max-width: 36em; margin: 0 auto; font-size: 18px; }
.a-head { padding-bottom: clamp(36px, 4vw, 52px); background: linear-gradient(180deg, var(--mist), var(--white) 85%); }
.a-head .crumb { font-size: var(--fs-xs); }
.a-head .crumb [aria-current] { max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-head h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.3; font-weight: 750; letter-spacing: -.045em; text-wrap: balance; }
.byline { margin-top: 28px; display: flex; align-items: center; gap: 14px; }
.byline .portrait { flex: none; width: 48px; height: 48px; }
/* 작성자 사진 — 대표 얼굴 한 장만, 블로그 작성자처럼 작게. 사진이 없으면 로고 기호 */
.portrait.face { overflow: hidden; background: var(--mist); box-shadow: 0 0 0 1px rgba(20, 27, 42, .06); }
.portrait.face img { width: 100%; height: 100%; object-fit: cover; }
.byline p { font-size: var(--fs-s); line-height: 1.6; color: var(--slate); }
.byline b { color: var(--ink); font-weight: 650; }

.prose { padding-bottom: clamp(48px, 6vw, 72px); color: var(--ink); line-height: 1.9; letter-spacing: -.01em; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.15em; }
.prose > p + p { margin-top: .7em; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3 { margin-top: 2.4em; font-size: 1.3em; line-height: 1.45; font-weight: 700; letter-spacing: -.035em; }
.prose > h2 + *, .prose > h3 + * { margin-top: .6em; }
.prose b, .prose strong { font-weight: 650; }
.prose a { color: var(--cobalt); font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.prose ul, .prose ol { display: grid; gap: .35em; padding: .2em 0; }
.prose li { display: flex; gap: 14px; }
.prose ul li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .8em; border-radius: 50%; background: var(--cobalt); }
/* 인용 — 첫 인용만 크게(한 장면), 나머지는 본문 폭 안의 작은 인용 */
.prose blockquote { margin: 1.6em 0; padding: 2px 0 2px 20px; box-shadow: inset 3px 0 0 var(--cobalt); font-size: 1.08em; line-height: 1.7; font-weight: 650; letter-spacing: -.02em; }
.prose blockquote:first-of-type { margin: 2em clamp(-120px, -8vw, 0px); padding: 4px 0 4px clamp(20px, 2.4vw, 32px); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.5; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
.prose blockquote p + p { margin-top: .5em; }
.prose blockquote + h2, .prose blockquote + h3 { margin-top: 1.8em; }
.prose figure { margin: 1.8em 0; }
.prose figure img, .prose > img { width: 100%; height: auto; border-radius: 16px; background: var(--mist); }
.prose figcaption { margin-top: 10px; font-size: var(--fs-xs); color: var(--slate); }
.prose hr { margin: 2.4em 0; height: 1px; border: 0; background: var(--line); }
.caution { margin-top: 2.4em !important; padding: 22px 26px; border-radius: 22px; background: var(--mist); }
.caution h3 { margin-top: 0; font-size: 1em; font-weight: 700; letter-spacing: -.025em; }
.caution p { margin-top: 6px; font-size: var(--fs-s); line-height: 1.8; color: var(--ink-2); }
.src { margin-top: 2.6em !important; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.75; color: var(--slate); }
.src .link { margin-left: 6px; white-space: nowrap; }

/* 다 읽은 뒤 — 점검 안내는 조용히, 이어서 읽기는 카드 없이 */
.next-read { padding-bottom: clamp(72px, 8vw, 104px); }
.check-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; padding: clamp(24px, 3vw, 32px); border-radius: 22px; background: var(--tint); }
.check-note h2 { font-size: var(--fs-l); line-height: 1.4; font-weight: 700; letter-spacing: -.03em; }
.check-note p { margin-top: 6px; font-size: var(--fs-s); line-height: 1.7; color: var(--ink-2); }
.check-note .act { display: grid; justify-items: center; gap: 8px; }
.check-note .act small { font-size: var(--fs-xs); color: var(--slate); }
.rel { margin-top: clamp(56px, 7vw, 88px); }
.rel-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.rel-h h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.035em; }
.rel-h .link { font-size: var(--fs-s); padding-block: 9px; margin-block: -9px; }   /* 누르는 자리 44px, 자리는 그대로 */
.rel ul { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.rel li a { display: block; padding-top: 20px; border-top: 1px solid var(--line); }
.r-meta { font-size: var(--fs-xs); color: var(--slate); }
.rel h3 { margin-top: 8px; font-size: var(--fs-l); line-height: 1.45; font-weight: 700; letter-spacing: -.03em; }
@media (hover: hover) { .rel a:hover h3 { color: var(--cobalt); } }
.rel a:active h3 { color: var(--cobalt); }

@media (max-width: 860px) {
    .rel ul { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .src .link { display: inline-block; padding: 10px 0; margin: -10px 0; }   /* 누르는 자리 44px, 자리는 그대로 */
}
@media (max-width: 640px) {
    .measure { font-size: 17px; }
    .prose { line-height: 1.85; }
    .prose blockquote:first-of-type { margin: 1.8em 0; }
    .check-note { grid-template-columns: minmax(0, 1fr); }
    .check-note .act { justify-items: stretch; text-align: center; }
    .a-head .crumb [aria-current] { max-width: 11em; }
}
@media print {
    .next-read, .crumb { display: none !important; }
    .a-head { padding: 0 0 16px; background: none; }
}

/* 링크 카드 · 영상 링크 — 네이버 블로그의 링크 미리보기 · 퍼온 영상 자리 (2026-11-02, 옮기며 빠졌던 하이퍼링크를 되살림) */
.prose > p.link-card { margin-top: 1em; }
.prose .link-card a { display: grid; gap: 2px; padding: 14px 18px 14px 52px; border-radius: 14px; background: var(--tint); color: var(--ink); font-weight: 400; text-decoration: none; position: relative; }
.prose .link-card a::before { content: ""; position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--cobalt); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / contain no-repeat; }
.prose .link-card.is-video a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='black'/%3E%3C/svg%3E"); }
.prose .link-card b { font-size: var(--fs-s); line-height: 1.5; font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .15s; }
.prose .link-card span { font-size: var(--fs-xs); color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .prose .link-card a:hover b { color: var(--cobalt); text-decoration-color: currentColor; } }