/* Typed lines get a small gap; an authored blank line clearly separates ideas.
   Preserve each empty paragraph and use the same scale in rendered previews. */
.article-body,.rhk-unified .rhk-preview .article-body{--reading-line:1.65;--reading-pause:1.4em;--reading-gap:.55em;line-height:var(--reading-line)}
.article-body{padding-block:24px}
.comment-content,.comment-thread .comment-content{--reading-line:1.6;--reading-pause:1.25em;--reading-gap:.45em;line-height:var(--reading-line);margin-block:10px}
.article-body.rhk-block-prose,.comment-content.rhk-block-prose{white-space:normal}
.rhk-block-prose:not(.archive-body):not(.archive-content) p{white-space:pre-wrap}
.article-body p,.comment-content p{margin:0}
.article-body p:empty,.comment-content p:empty,
.article-body p.rhk-empty-paragraph,.comment-content p.rhk-empty-paragraph{height:var(--reading-pause);min-height:0;line-height:0;margin:0}
.article-body p.rhk-empty-paragraph br,.comment-content p.rhk-empty-paragraph br{line-height:0}
.article-body :is(ul,ol),.comment-content :is(ul,ol){margin-block:.65em}
.article-body blockquote,.comment-content blockquote{margin-block:.8em;padding-block:.4em}
.article-body :is(h2,h3),.comment-content :is(h2,h3){line-height:1.4}
.article-body>:first-child,.comment-content>:first-child{margin-top:0}
.article-body>:last-child,.comment-content>:last-child{margin-bottom:0}
.rhk-unified .rhk-preview .article-body{padding-block:0}
.rhk-unified.rhk-compact .rhk-preview .article-body{--reading-line:1.6;--reading-pause:1.25em;--reading-gap:.45em}
.rhk-unified .rhk-editor .ql-editor{line-height:1.7}
.rhk-unified.rhk-compact .rhk-editor .ql-editor{line-height:1.65}
.rhk-unified .rhk-editor .ql-editor.ql-blank:before{line-height:inherit}

/* Group title, byline and tags before the small action row. */
.article-card>h1{line-height:1.35;margin-block:10px 14px}
.article-card>.article-meta{line-height:1.5;gap:6px 18px;padding-bottom:0;border-bottom:0}
.article-card>.article-tags{margin-top:12px;line-height:1.5;gap:6px}
.article-card>.article-tags:empty{display:none}
.article-card>.post-conveniences{align-items:center;gap:4px 20px;margin:16px 0 0;padding:6px 0}
.article-card>.post-tools{margin-top:0}
.article-card>.comments{margin-top:24px}
.comments>h2{line-height:1.4;margin-bottom:16px}
.comment-thread .comment-top{line-height:1.45}
.comment-thread .comment-conveniences{margin-top:4px}
.comment-form h3{line-height:1.4;margin-bottom:14px}
@media(max-width:760px){
 .article-card>h1{margin-block:8px 12px}
 .article-card>.article-meta{gap:5px 12px}
 .article-card>.article-tags{margin-top:10px}
 .article-card>.post-conveniences{gap:4px 16px;margin-top:14px;padding-block:4px}
 .article-body{padding-block:20px}
}

/* 2026-09-18: Enter로 바꾼 줄(새 문단·옛 글의 <br>)과 자동 줄바꿈을 구분한다. 자동 줄바꿈은 좁게, Enter 사이는 --reading-gap 만큼 띄운다. */
.article-body :is(p,div.rhk-line),.comment-content :is(p,div.rhk-line){margin:0 0 var(--reading-gap)}
.article-body :is(p,div.rhk-line):last-child,.comment-content :is(p,div.rhk-line):last-child{margin-bottom:0}
.article-body :is(p,div).rhk-empty-paragraph,.comment-content :is(p,div).rhk-empty-paragraph{height:var(--reading-pause);min-height:0;line-height:0;margin:0}
.article-body div.rhk-empty-paragraph br,.comment-content div.rhk-empty-paragraph br{line-height:0}
.article-body .rhk-line-gap,.comment-content .rhk-line-gap{display:block;height:var(--reading-gap)}
/* YouTube embeds: the sanitizer drops width/height, so size them here. Shorts (src has shorts=1) are vertical. */
.article-body iframe[src*="youtube"]{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:10px;margin:.4em 0 .8em;background:#000}
.article-body iframe[src*="youtube"][src*="shorts=1"]{width:min(100%,340px);aspect-ratio:9/16;border-radius:14px}

/* Shared YouTube identity: brand colour stays on the small play mark, not the text.
   Override legacy inline red/oversized labels in the view without rewriting posts. */
:is(.article-body,.comment-content) a.rhk-youtube-link{color:var(--ink,#223747)!important;font-size:1rem!important;font-weight:500!important;line-height:1.6!important;letter-spacing:normal!important;white-space:normal!important;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:#a5b6ae;text-underline-offset:3px;background:transparent!important}
:is(.article-body,.comment-content) a.rhk-youtube-link .rhk-youtube-label,
:is(.article-body,.comment-content) a.rhk-youtube-link .rhk-youtube-label *{color:inherit!important;font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;background:transparent!important}
a.rhk-youtube-link::before{content:"";display:inline-block;width:20px;height:14px;margin-right:7px;vertical-align:-1px;flex:none;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath fill='%23f03' d='M27.4 3.1a3.5 3.5 0 0 0-2.5-2.5C22.7 0 14 0 14 0S5.3 0 3.1.6A3.5 3.5 0 0 0 .6 3.1C0 5.3 0 10 0 10s0 4.7.6 6.9a3.5 3.5 0 0 0 2.5 2.5C5.3 20 14 20 14 20s8.7 0 10.9-.6a3.5 3.5 0 0 0 2.5-2.5C28 14.7 28 10 28 10s0-4.7-.6-6.9Z'/%3E%3Cpath fill='white' d='m11 14.3 7.3-4.3L11 5.7Z'/%3E%3C/svg%3E")}
:is(.article-body,.comment-content) a.rhk-youtube-standalone{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:44px;box-sizing:border-box;padding:8px 12px;border:1px solid #d5ddd5;border-radius:6px;text-decoration:none}
a.rhk-youtube-standalone::before{margin-right:0}
.rhk-youtube-label{min-width:0;overflow-wrap:anywhere}
:is(.article-body,.comment-content) a.rhk-youtube-link:hover{text-decoration:underline;text-decoration-color:currentColor}
a.rhk-youtube-link:focus-visible{outline:2px solid #527368;outline-offset:3px}