/* 이 페이지에서만 쓰는 모양(엔진이 이 페이지에서만 공용 뒤에 붙임). 여러 페이지가 쓰는 모양은 공용 common/base.css (2026-11-09 공용 + 페이지별) */
.dd-post-hero { position: relative; overflow: hidden; background: #2a2018; }
.dd-post-hero:has(> .dd-post-img:not([hidden]))::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 14, 8, .55), rgba(20, 14, 8, 0) 50%), linear-gradient(to bottom, rgba(20, 14, 8, .3), rgba(20, 14, 8, 0) 22%); pointer-events: none; }
.dd-post-hero:has(> .dd-post-img:not([hidden])) > .wrap { position: absolute; inset: 0; z-index: 1; display: flex; }
.dd-post-hero:has(> .dd-post-img:not([hidden])) .post-head { flex: 1; grid-template-rows: auto 1fr auto; align-items: end; padding: calc(var(--hd-bar) + var(--s1)) 0 var(--s4); border: 0; color: #fff; }
.dd-post-hero:has(> .dd-post-img:not([hidden])) .post-head .more { align-self: start; color: #fff; }
.dd-post-hero:has(> .dd-post-img:not([hidden])) .post-head .meta { color: rgba(255, 255, 255, .85); }
.post-body .dd-tags a:hover { text-decoration: underline; }
@media (min-width: 768px){
.dd-post-img { aspect-ratio: 16 / 10; object-fit: contain; background: none; }
}
.dd-post-hero.is-wide .dd-post-img { object-fit: cover; }
@media (min-width: 1024px){
.dd-post-img { aspect-ratio: auto; height: 100vh; height: 100svh; }
.dd-post-hero:has(> .dd-post-img:not([hidden])) .post-head { padding: calc(var(--hd-bar) + var(--s2)) 0 128px; }
}