/* DX Froala — 이미지 묶음(배치·슬라이드) + 라이트박스. 에디터·글 보기 공통. 그림자 없음.
   레이아웃은 모두 CSS, 반응형은 컨테이너 너비 기준(@container) 입니다. */
.dxg{--g:8px;--rd:8px;--ar:4/3;position:relative;display:block;clear:both;margin:16px 0;max-width:100%;box-sizing:border-box;container-type:inline-size}
.dxg *{box-sizing:border-box}
.dxg-gp-0{--g:0px}.dxg-gp-4{--g:4px}.dxg-gp-8{--g:8px}.dxg-gp-16{--g:16px}
.dxg-rd-0{--rd:0px}.dxg-rd-8{--rd:8px}.dxg-rd-16{--rd:16px}
.dxg-ar-11{--ar:1/1}.dxg-ar-43{--ar:4/3}.dxg-ar-32{--ar:3/2}.dxg-ar-169{--ar:16/9}
.dxg .dxg-w{position:relative;margin:0;padding:0;border:0;background:none;--cols:3}
.dxg .dxg-i{position:relative;display:block;margin:0 !important;padding:0 !important;border:0;min-width:0;overflow:hidden;border-radius:var(--rd);background:#e5e9ef;cursor:zoom-in;float:none}
.dxg .dxg-i img{display:block !important;width:100% !important;height:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;object-fit:cover;float:none !important;-webkit-user-drag:none}
.dxg-m{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.55);color:#fff;font:700 1.5em/1 -apple-system,"Segoe UI","Malgun Gothic",sans-serif;pointer-events:none}

/* ── 배치 ── */
.dxg-L-grid2 .dxg-w,.dxg-L-grid3 .dxg-w,.dxg-L-grid4 .dxg-w,.dxg-L-hero .dxg-w,.dxg-L-mosaic .dxg-w{display:grid;gap:var(--g);grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.dxg-L-grid2 .dxg-w{--cols:2}.dxg-L-grid3 .dxg-w{--cols:3}.dxg-L-grid4 .dxg-w{--cols:4}.dxg-L-hero .dxg-w{--cols:3}.dxg-L-mosaic .dxg-w{--cols:4}
.dxg-L-grid2 .dxg-i,.dxg-L-grid3 .dxg-i,.dxg-L-grid4 .dxg-i,.dxg-L-hero .dxg-i{aspect-ratio:var(--ar)}
.dxg-L-hero .dxg-i:first-child{grid-column:1/-1;aspect-ratio:16/9}
.dxg-L-mosaic .dxg-i{aspect-ratio:1/1}
.dxg-L-mosaic .dxg-i:first-child{grid-column:span 2;grid-row:span 2}
.dxg-ar-auto.dxg-L-grid2 .dxg-i,.dxg-ar-auto.dxg-L-grid3 .dxg-i,.dxg-ar-auto.dxg-L-grid4 .dxg-i,.dxg-ar-auto.dxg-L-hero .dxg-i:not(:first-child){aspect-ratio:auto}
.dxg-ar-auto.dxg-L-grid2 .dxg-w,.dxg-ar-auto.dxg-L-grid3 .dxg-w,.dxg-ar-auto.dxg-L-grid4 .dxg-w,.dxg-ar-auto.dxg-L-hero .dxg-w{align-items:start}
.dxg-ar-auto.dxg-L-grid2 .dxg-i img,.dxg-ar-auto.dxg-L-grid3 .dxg-i img,.dxg-ar-auto.dxg-L-grid4 .dxg-i img,.dxg-ar-auto.dxg-L-hero .dxg-i:not(:first-child) img{height:auto !important}
.dxg-L-masonry2 .dxg-w{column-count:2;column-gap:var(--g)}
.dxg-L-masonry3 .dxg-w{column-count:3;column-gap:var(--g)}
.dxg-L-masonry2 .dxg-i,.dxg-L-masonry3 .dxg-i{break-inside:avoid;margin-bottom:var(--g) !important}
.dxg-L-masonry2 .dxg-i img,.dxg-L-masonry3 .dxg-i img,.dxg-L-stack .dxg-i img{height:auto !important}
.dxg-L-stack .dxg-w{display:flex;flex-direction:column;gap:var(--g)}
.dxg-mx-4 .dxg-i:nth-child(n+5),.dxg-mx-6 .dxg-i:nth-child(n+7),.dxg-mx-9 .dxg-i:nth-child(n+10){display:none !important}
@container (max-width:620px){
  .dxg-L-grid4 .dxg-w,.dxg-L-grid3 .dxg-w,.dxg-L-hero .dxg-w{--cols:2}
  .dxg-L-masonry3 .dxg-w{column-count:2}
}
@container (max-width:430px){
  .dxg-L-mosaic .dxg-w{--cols:3}
}
@container (max-width:320px){
  .dxg-L-grid2 .dxg-w{--cols:1}
  .dxg-L-masonry2 .dxg-w,.dxg-L-masonry3 .dxg-w{column-count:1}
}
@supports not (container-type:inline-size){
  @media (max-width:640px){.dxg-L-grid4 .dxg-w,.dxg-L-grid3 .dxg-w,.dxg-L-hero .dxg-w{--cols:2}.dxg-L-masonry3 .dxg-w{column-count:2}.dxg-L-mosaic .dxg-w{--cols:3}}
}

/* ── 슬라이드 ──
   스크립트 전(또는 에디터 안)에는 옆으로 밀어 보는 가로 스크롤 구조, 스크립트가 켜지면(.dxg-on) 효과별 변환 방식으로 바뀝니다.
   JS 가 슬라이드마다 --d(현재 위치와의 거리, 소수), --a(절댓값), --s(-1~1), --k(|s|), --ps(0 이상), --ng(0 이하), --f2 를 넣고,
   손가락/마우스 드래그 중에는 이 값이 실시간으로 바뀌어 사진이 손을 따라 움직입니다. */
.dxg-S .dxg-vp{position:relative}
.dxg-S .dxg-w{display:flex;gap:var(--g);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;--n:1;border-radius:var(--rd)}
.dxg-S .dxg-w::-webkit-scrollbar{display:none}
.dxg-S .dxg-i{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:var(--ar)}
.dxg-S-multi .dxg-w{--n:3}
.dxg-S-multi .dxg-i{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n))}
@container (max-width:760px){.dxg-S-multi .dxg-w{--n:2}}
@container (max-width:460px){.dxg-S-multi .dxg-w{--n:1}}
.dxg-fit-contain .dxg-i img{object-fit:contain}
.dxg-fit-contain .dxg-i{background:#0f172a}

.dxg-on .dxg-vp{overflow:hidden;border-radius:var(--rd);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.dxg-on .dxg-vp.dxg-drag{cursor:grabbing}
.dxg-on .dxg-w{--iw:100%;--L:0%;display:block;position:relative;overflow:visible;scroll-snap-type:none;border-radius:0;gap:0}
.dxg-on .dxg-w::before{content:"";display:block;width:var(--iw);margin-left:var(--L);aspect-ratio:var(--ar)}
.dxg-on .dxg-i{position:absolute;top:0;left:var(--L);width:var(--iw);height:100%;flex:none;aspect-ratio:auto;scroll-snap-align:none;cursor:zoom-in;will-change:transform;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .55s ease;
  transform:translate3d(calc(var(--d,0) * (100% + var(--g))),0,0)}
.dxg-on .dxg-vp.dxg-drag .dxg-i{transition:none !important}
.dxg-on:not(.dxg-S-multi):not(.dxg-S-peek):not(.dxg-S-center):not(.dxg-S-coverflow) .dxg-i:not(.is-on){pointer-events:none}
/* 여러 장 보기 */
.dxg-on.dxg-S-multi .dxg-w{--iw:calc((100% - (var(--n) - 1) * var(--g)) / var(--n))}
/* 옆 사진 살짝 보이기 */
.dxg-on.dxg-S-peek .dxg-w{--iw:84%;--L:8%}
/* 가운데 강조 */
.dxg-on.dxg-S-center .dxg-w{--iw:62%;--L:19%}
.dxg-on.dxg-S-center .dxg-i{transform:translate3d(calc(var(--d,0) * (100% + var(--g))),0,0) scale(calc(1 - var(--k,0) * .16));opacity:calc(.35 + (1 - var(--k,0)) * .65)}
/* 커버플로우(입체) */
.dxg-on.dxg-S-coverflow .dxg-w{--iw:56%;--L:22%;perspective:1100px}
.dxg-on.dxg-S-coverflow .dxg-i{transform:translate3d(calc(var(--d,0) * 68%),0,calc(var(--k,0) * -140px)) rotateY(calc(var(--s,0) * -42deg));opacity:var(--f2,1)}
/* 카드 넘기기 */
.dxg-on.dxg-S-cards .dxg-vp{padding-top:38px}
.dxg-on.dxg-S-cards .dxg-w{--iw:86%;--L:7%}
.dxg-on.dxg-S-cards .dxg-i{transform-origin:50% 100%;transform:translate3d(calc(var(--ng,0) * 115%),calc(var(--ps,0) * -28px),0) scale(calc(1 - var(--ps,0) * .035)) rotate(calc(var(--ng,0) * 7deg));opacity:calc(var(--f2,1) * (1 + var(--ng,0)))}
/* 페이드 / 줌 / 회전 / 켄번스 */
.dxg-on.dxg-S-fade .dxg-i,.dxg-on.dxg-S-kenburns .dxg-i{transform:none;opacity:calc(1 - var(--a,0));transition:opacity .7s ease}
.dxg-on.dxg-S-zoom .dxg-i{transform:scale(calc(1 + var(--a,0) * .18));opacity:calc(1 - var(--a,0));transition:transform .7s ease,opacity .7s ease}
.dxg-on.dxg-S-flip .dxg-w{perspective:1400px}
.dxg-on.dxg-S-flip .dxg-i{backface-visibility:hidden;transform:translate3d(calc(var(--d,0) * 30%),0,0) rotateY(calc(var(--s,0) * 75deg));opacity:calc(1 - var(--k,0))}
.dxg-S-kenburns .dxg-i.is-on img{animation:dxgkb 8s ease-out both}
.dxg-S-kenburns .dxg-i:nth-child(even).is-on img{animation-name:dxgkb2}
@keyframes dxgkb{from{transform:scale(1)}to{transform:scale(1.16)}}
@keyframes dxgkb2{from{transform:scale(1.16) translate3d(-3%,0,0)}to{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.dxg-on .dxg-i{transition:none !important}.dxg-S-kenburns .dxg-i.is-on img{animation:none}}
/* 세로 썸네일 */
.dxg-sd{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:8px;align-items:start}
.dxg-sd .dxg-th{flex-direction:column;margin:0;grid-column:2;grid-row:1;align-self:stretch;height:0;min-height:100%;overflow-y:auto;overflow-x:hidden}
.dxg-sd .dxg-th button{flex:0 0 auto;width:100%;height:64px}
@container (max-width:520px){
  .dxg-sd{display:block}
  .dxg-sd .dxg-th{flex-direction:row;height:auto;min-height:0;margin-top:8px;overflow-x:auto;overflow-y:hidden}
  .dxg-sd .dxg-th button{flex:0 0 76px;width:76px;height:54px}
}
.dxg-ar{position:absolute;top:50%;z-index:200;width:42px;height:42px;margin-top:-21px;padding:0;border:0;border-radius:50%;background:rgba(15,23,42,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .2s,background .2s}
.dxg-ar:hover{background:rgba(15,23,42,.8)}
.dxg-ar svg{width:22px;height:22px;fill:currentColor}
.dxg-pv{left:10px}.dxg-nx{right:10px}
@media (hover:hover){.dxg-ar{opacity:0}.dxg-vp:hover .dxg-ar,.dxg-ar:focus-visible{opacity:1}}
@media (max-width:480px){.dxg-ar{width:34px;height:34px;margin-top:-17px}}
.dxg-dots{position:absolute;left:0;right:0;bottom:10px;z-index:200;display:flex;justify-content:center;gap:6px;pointer-events:none}
.dxg-dots button{pointer-events:auto;width:8px;height:8px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.6);cursor:pointer;transition:width .2s,background .2s}
.dxg-dots button.on{width:22px;background:#fff}
.dxg-ct{position:absolute;right:10px;top:10px;z-index:200;padding:4px 10px;border-radius:999px;background:rgba(15,23,42,.6);color:#fff;font:600 12px/1.4 -apple-system,"Segoe UI",sans-serif;pointer-events:none}
.dxg-S-cards .dxg-ct{top:44px}
.dxg-th{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.dxg-th button{flex:0 0 76px;height:54px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;opacity:.55;background:#e5e9ef;cursor:pointer;transition:opacity .2s}
.dxg-th button.on{border-color:#2563eb;opacity:1}
.dxg-th .tm{display:block;width:100%;height:100%;background-size:cover;background-position:center}

/* ── 에디터 안 표시 ── */
.fr-element .dxg{cursor:pointer;outline:2px dashed #cbd5e1;outline-offset:3px;-webkit-user-select:none;user-select:none}
.fr-element .dxg:hover{outline-color:#2563eb}
.fr-element .dxg::after{content:"이미지 묶음 · 눌러서 수정";position:absolute;right:8px;top:8px;z-index:4;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;font:12px/1 -apple-system,"Segoe UI","Malgun Gothic",sans-serif;pointer-events:none}
.fr-element .dxg .dxg-i{cursor:pointer}
.fr-element .dxg-S .dxg-i{flex-basis:72%}

/* ── 라이트박스 ── */
html.dxlb-lock{overflow:hidden !important}
.dxlb{position:fixed;inset:0;z-index:2147483300;display:flex;flex-direction:column;background:rgba(8,10,14,.97);color:#fff;font:14px/1.5 -apple-system,"Segoe UI","Malgun Gothic",sans-serif;opacity:0;transition:opacity .18s;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain}
.dxlb.on{opacity:1}
.dxlb *{box-sizing:border-box}
.dxlb-st{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
.dxlb-im{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:50% 50%;will-change:transform;cursor:zoom-in;-webkit-user-drag:none;user-drag:none;margin:0 !important;border-radius:0 !important;box-shadow:none !important}
.dxlb.z .dxlb-im{cursor:grab}
.dxlb-ld{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:dxlbs .8s linear infinite;pointer-events:none;display:none}
.dxlb.ld .dxlb-ld{display:block}
@keyframes dxlbs{to{transform:rotate(360deg)}}
.dxlb-err{position:absolute;left:0;right:0;top:50%;text-align:center;color:#cbd5e1;display:none}
.dxlb.er .dxlb-err{display:block}
.dxlb-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:6px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));background:linear-gradient(rgba(0,0,0,.55),transparent);pointer-events:none}
.dxlb-top>*{pointer-events:auto}
.dxlb-ct{font-weight:600;font-size:14px;margin-right:auto;text-shadow:0 0 4px rgba(0,0,0,.6)}
.dxlb button{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .15s}
.dxlb button:hover{background:rgba(255,255,255,.26)}
.dxlb button svg{width:22px;height:22px;fill:currentColor}
.dxlb-nv{position:absolute;top:50%;z-index:3;margin-top:-24px;width:48px !important;height:48px !important}
.dxlb-pv{left:14px}.dxlb-nx{right:14px}
.dxlb-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:30px 16px max(14px,env(safe-area-inset-bottom));text-align:center;font-size:14px;color:#e5e7eb;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none;text-shadow:0 0 4px rgba(0,0,0,.6)}
.dxlb-cap:empty{display:none}
.dxlb.one .dxlb-nv,.dxlb.one .dxlb-ct{display:none}
@media (max-width:640px){.dxlb-nv{display:none}.dxlb button{width:40px;height:40px}}
@media (hover:none){.dxlb-zb{display:none !important}}
.dxlb-z{cursor:zoom-in}