/* DX Froala — 이미지+글 배치 블록 (에디터·글 보기 공통). 그림자 없음.
   <div class="dxm dxm-L-left dxm-w-40 dxm-v-mid dxm-gp-16 dxm-rd-8 dxm-bg-n"><figure class="dxm-f"><img></figure><div class="dxm-t">글…</div></div>
   모바일: 블록 폭이 560px 이하(또는 화면 640px 이하)이면 이미지가 위, 글이 아래로 쌓입니다. */
.dxm{--iw:40%;--gp:16px;--rd:8px;--tm:240px;container-type:inline-size;display:flex;flex-wrap:wrap;gap:var(--gp);align-items:center;position:relative;clear:both;margin:16px 0;max-width:100%;box-sizing:border-box}
.dxm *{box-sizing:border-box}
.dxm-w-30{--iw:30%}.dxm-w-40{--iw:40%}.dxm-w-50{--iw:50%}.dxm-w-60{--iw:60%}
.dxm-gp-0{--gp:0px}.dxm-gp-8{--gp:8px}.dxm-gp-16{--gp:16px}.dxm-gp-24{--gp:24px}
.dxm-rd-0{--rd:0px}.dxm-rd-8{--rd:8px}.dxm-rd-16{--rd:16px}.dxm-rd-24{--rd:24px}
.dxm-v-top{align-items:flex-start}.dxm-v-mid{align-items:center}.dxm-v-bot{align-items:flex-end}
.dxm .dxm-f{display:block;margin:0;padding:0;border:0;flex:1 1 var(--iw);min-width:0;max-width:100%}
.dxm .dxm-f img{display:block !important;width:100% !important;height:auto !important;max-width:100% !important;margin:0 !important;padding:0;border:0;border-radius:var(--rd);float:none !important;box-shadow:none !important}
.dxm .dxm-f a{display:block}
.dxm .dxm-t{flex:999 1 var(--tm);min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.dxm .dxm-t>:first-child{margin-top:0}
.dxm .dxm-t>:last-child{margin-bottom:0}
.dxm-L-right{flex-direction:row-reverse}
/* 위/아래: 한 줄에 하나씩 */
.dxm-L-top .dxm-f,.dxm-L-top .dxm-t,.dxm-L-bottom .dxm-f,.dxm-L-bottom .dxm-t{flex:1 1 100%}
/* 글 감싸기 */
.dxm-L-wrap,.dxm-L-wrapr{display:block}
.dxm-L-wrap::after,.dxm-L-wrapr::after{content:"";display:block;clear:both}
.dxm-L-wrap .dxm-f{float:left;width:var(--iw);margin:0 var(--gp) 8px 0}
.dxm-L-wrapr .dxm-f{float:right;width:var(--iw);margin:0 0 8px var(--gp)}
.dxm-L-wrap .dxm-t,.dxm-L-wrapr .dxm-t{display:block}
/* 좁은 화면(모바일·좁은 본문): 이미지가 위, 글이 아래로 쌓임 — 글 칸이 너무 좁아지기 전에 바꿉니다 */
@container (max-width:560px){
  .dxm-L-left .dxm-f,.dxm-L-left .dxm-t,.dxm-L-right .dxm-f,.dxm-L-right .dxm-t{flex:1 1 100%}
  .dxm-L-wrap .dxm-f,.dxm-L-wrapr .dxm-f{float:none;width:100%;margin:0 0 12px}
}
@media (max-width:640px){
  .dxm-L-left .dxm-f,.dxm-L-left .dxm-t,.dxm-L-right .dxm-f,.dxm-L-right .dxm-t{flex:1 1 100%}
  .dxm-L-wrap .dxm-f,.dxm-L-wrapr .dxm-f{float:none;width:100%;margin:0 0 12px}
}
/* 카드형 */
.dxm-L-card{display:block;border:1px solid #e5e7eb;border-radius:calc(var(--rd) + 4px);overflow:hidden;background:#fff}
.dxm-L-card .dxm-f img{border-radius:0}
.dxm-L-card .dxm-t{padding:16px 18px}
/* 글 겹치기 */
.dxm-L-overlay{display:block;border-radius:var(--rd);overflow:hidden}
.dxm-L-overlay .dxm-f img{border-radius:0;min-height:220px;object-fit:cover}
.dxm-L-overlay .dxm-t{position:absolute;left:0;right:0;bottom:0;padding:56px 22px 20px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));color:#fff}
.dxm-L-overlay .dxm-t,.dxm-L-overlay .dxm-t *{color:#fff !important}
@container (max-width:440px){.dxm-L-overlay .dxm-t{padding:28px 14px 14px;font-size:.92em}.dxm-L-overlay .dxm-f img{min-height:300px}}
/* 배경색 */
.dxm-bg-g,.dxm-bg-b,.dxm-bg-y,.dxm-bg-d{padding:16px;border-radius:calc(var(--rd) + 4px)}
.dxm-bg-g{background:#f3f4f6}.dxm-bg-b{background:#eaf2ff}.dxm-bg-y{background:#fff6dd}.dxm-bg-d{background:#1f2937}
.dxm-bg-d .dxm-t,.dxm-bg-d .dxm-t *{color:#f9fafb !important}
.dxm-L-card.dxm-bg-g,.dxm-L-card.dxm-bg-b,.dxm-L-card.dxm-bg-y,.dxm-L-card.dxm-bg-d{padding:0}
.dxm-L-card.dxm-bg-g{background:#f3f4f6}
.dxm-L-overlay[class*="dxm-bg-"]{padding:0}
/* 에디터 안 */
.fr-element .dxm:hover{outline:1px dashed #cbd5e1;outline-offset:4px}