/* 이미지 원본의 크기·비율·캡션은 유지하고 전환 표시만 렌더 속성으로 적용한다.
   범위: .guide-content-carousel, 그리고 runtime이 편집 중 표시를 붙인 단일 figure(data-sj-media-mode="editing")만. */
.guide-content-carousel { max-width: 100%; min-width: 0; }
:is(.guide-content-carousel, :where(figure.guide-content-image, figure.image)[data-sj-media-mode="editing"]) > .sj-media-controls button:focus-visible { outline: 2px solid var(--brand, #315de5); outline-offset: 3px; }
:is(.guide-content-carousel, :where(figure.guide-content-image, figure.image)[data-sj-media-mode="editing"]) > .sj-media-controls button:disabled { opacity: .5; cursor: default; }
/* 화면에는 보이는 번호(01 / 03)만 두고, 읽기용 안내는 status 한 곳에서만 읽힌다. */
.guide-content-carousel .sj-media-status { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 편집 모드 fallback: 슬라이드 레이아웃(data-sj-media-layout)이 없는 경우에만 가로 썸네일 + 이미지 추가. 단일 이미지의 추가 버튼 포함 ── */
:is(.guide-content-carousel, :where(figure.guide-content-image, figure.image)[data-sj-media-mode="editing"]) > .sj-media-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
:is(.guide-content-carousel, :where(figure.guide-content-image, figure.image)[data-sj-media-mode="editing"]) .sj-media-add { min-height: 36px; padding: 6px 12px; border: 1px dashed color-mix(in srgb, var(--brand, #315de5), #fff 55%); border-radius: 8px; background: #fff; color: var(--brand, #315de5); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
:is(.guide-content-carousel, :where(figure.guide-content-image, figure.image)[data-sj-media-mode="editing"]) .sj-media-add::before { content: "+"; margin-right: 6px; }
.guide-content-carousel[data-sj-media-mode="editing"]:not([data-sj-media-layout]) { display: flex; align-items: start; gap: 12px; overflow-x: auto; padding: 4px; }
.guide-content-carousel[data-sj-media-mode="editing"]:not([data-sj-media-layout]) > figure { flex: 0 0 180px; margin: 0 !important; }
.guide-content-carousel[data-sj-media-mode="editing"]:not([data-sj-media-layout]) > figure[data-sj-media-current="true"] { outline: 2px solid var(--brand, #315de5); outline-offset: 2px; }
.guide-content-carousel[data-sj-media-mode="editing"]:not([data-sj-media-layout]) > figure[data-sj-media-current="true"] img[data-content-field][data-admin-selected="true"] { outline: none !important; }
.guide-content-carousel[data-sj-media-mode="editing"]:not([data-sj-media-layout]) > figure img { display: block; max-width: 100%; width: 100%; height: 120px; object-fit: contain; }
/* 사진이 많아도 '이미지 추가'가 오른쪽 끝에 늘 보이게 한다. */
.guide-content-carousel[data-sj-media-mode="editing"]:not([data-sj-media-layout]) > .sj-media-controls { position: sticky; right: 0; flex: 0 0 auto; align-self: center; padding-left: 8px; background: linear-gradient(to right, transparent, #fff 12px); }

/* ── 공개·미리보기 + 편집 다중 모음(슬라이드 레이아웃): 공통 ─────────────
   선택자 :is(public, editing:where(layout))은 명시도가 예전 public 선택자와 같다(편집 쪽 조건은 :where라 0). */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) { position: relative; margin-block: 16px; touch-action: pan-y pinch-zoom; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) > figure { margin: 0 auto; }
/* 기존 즉시 전환(비활성 숨김)은 새 슬라이드 레이아웃(data-sj-media-layout)이 아닌 캐로셀에만. 슬라이드 레이아웃은 아래에서 visibility로 처리한다. */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])):not([data-sj-media-layout]) > figure[data-sj-media-current="false"] { display: none !important; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) > .sj-media-controls { gap: 12px; padding: 0; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) .sj-media-arrow { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid transparent; font: inherit; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) .sj-media-arrow svg { display: block; width: 20px; height: 20px; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) .sj-media-pagination { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 12px; min-width: 0; max-width: 100%; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) .sj-media-dots { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0; min-width: 0; }
/* 점 버튼은 누르는 영역 24px(터치 44px), 보이는 모양은 ::before. 현재 쪽은 길게(배너 32px). */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) .sj-media-dot { display: grid; place-items: center; min-width: 24px; height: 24px; margin: 0; padding: 0 4px; border: 0; background: none; cursor: pointer; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) .sj-media-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--sj-media-dot, #c3cad6); transition: width .3s, background-color .3s; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) .sj-media-dot[aria-current="true"]::before { width: 24px; background: var(--sj-media-dot-active, var(--brand, #315de5)); }
/* 점 슬롯 고정: 모든 점 버튼을 32px 슬롯으로 같게 두고 ::before만 그 안에서 늘고 준다(기본 현재 막대 24px, 배너 32px).
   현재 막대 끝에서 옆 점까지 간격은 예전과 같은 12px이고, 전환 중 점 묶음·페이지 판·이전/다음·번호의 위치가 흔들리지 않는다.
   막대(bars)는 원래 폭이 일정해 제외. 모바일 높이 44px 규칙은 그대로. */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])):not([data-sj-media-pagination="bars"]) .sj-media-dot { width: 32px; min-width: 32px; padding: 0; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) .sj-media-count { color: var(--sj-media-count, #6b7280); font-size: 12px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 페이지 표시 종류 */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-pagination="dots"] .sj-media-count,
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-pagination="bars"] .sj-media-count { display: none; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-pagination="counter"] .sj-media-dots { display: none; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-pagination="bars"] .sj-media-dot { padding: 0 2px; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-pagination="bars"] .sj-media-dot::before { width: 20px; height: 3px; border-radius: 2px; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-pagination="bars"] .sj-media-dot[aria-current="true"]::before { width: 20px; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-pagination="none"] .sj-media-pagination { display: none; }

/* ── 배너형: 이미지 위 양옆 화살표 + 하단 중앙 페이지 표시 (홈 배너 .hero-arrow/.hero-dot/.hero-counter 느낌) ── */
/* 열은 minmax(0, 1fr): 페이지 표시의 max-content가 암묵 열의 최소 폭을 키워 가로로 넘치지 않게 한다. */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] { display: grid; grid-template-columns: minmax(0, 1fr); --sj-media-dot: rgba(255,255,255,.5); --sj-media-dot-active: #fff; --sj-media-count: rgba(255,255,255,.88); }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] > figure,
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] > .sj-media-controls { grid-area: 1 / 1; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] > .sj-media-controls { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 0 16px; pointer-events: none; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] .sj-media-arrow,
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] .sj-media-pagination { pointer-events: auto; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] .sj-media-arrow.is-next { margin-left: auto; }
/* 밝은 이미지에서도 읽히도록 반투명 어두운 판을 깐다. */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] .sj-media-arrow { width: 48px; height: 48px; border-color: rgba(255,255,255,.28); background: rgba(10,14,26,.32); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] .sj-media-arrow:hover { background: rgba(10,14,26,.5); }
/* left:50% 기준 shrink-to-fit(폭이 절반으로 줄어 점이 줄바꿈되던 문제)을 피하려고 내용 폭(max-content)을 쓰고 캐로셀 폭 안으로만 제한한다. 많을 때만 자연 높이로 줄바꿈. */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] .sj-media-pagination { position: absolute; bottom: 14px; left: 50%; width: max-content; max-width: calc(100% - 24px); padding: 4px 12px; border-radius: 22px; background: rgba(10,14,26,.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transform: translateX(-50%); }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] .sj-media-dot[aria-current="true"]::before { width: 32px; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"][data-sj-media-pagination="bars"] .sj-media-dot[aria-current="true"]::before { width: 20px; }
/* 캡션이 하나라도 있는 캐로셀(data-sj-media-captions="true"): 컨트롤 전체(화살표·페이지 표시)를 캡션 아래 둘째 줄(normal flow)로 분리한다.
   슬라이드마다 캡션 유무가 달라도 컨트롤 위치가 바뀌지 않는다(예전 '현재 슬라이드에 캡션이 있을 때' 조건 대체). */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"][data-sj-media-captions="true"] { grid-template-rows: auto auto; --sj-media-dot: #c3cad6; --sj-media-dot-active: var(--brand, #315de5); --sj-media-count: #6b7280; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"][data-sj-media-captions="true"] > figure { grid-area: 1 / 1; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"][data-sj-media-captions="true"] > .sj-media-controls { grid-area: 2 / 1; flex-wrap: nowrap; min-width: 0; justify-content: center; gap: 4px 12px; margin-top: 10px; padding: 0; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"][data-sj-media-captions="true"] .sj-media-pagination { position: static; max-width: 100%; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"][data-sj-media-captions="true"] .sj-media-arrow.is-next { margin-left: 0; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"][data-sj-media-captions="true"]:not([data-sj-media-navigation="minimal"]) .sj-media-arrow { border-color: #dfe4ec; background: #fff; color: var(--ink-1, var(--ink, #273248)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"][data-sj-media-captions="true"][data-sj-media-navigation="minimal"] .sj-media-arrow { color: var(--ink-1, var(--ink, #273248)); filter: none; }

/* ── 슬라이드 레이아웃(공개·미리보기, 여러 이미지, data-sj-media-layout): 옆으로 실제 이동 + 높이 고정 ─────────────
   모든 figure를 같은 칸에 겹치고 figure 안은 [이미지 행 | 캡션 행] 고정 높이. 이미지 높이 = 첫 이미지 자연 비율(runtime --sj-media-image-height),
   캡션 행 = 모든 캡션 중 최대(--sj-media-caption-height). 이미지는 크롭 없이 전체 표시(contain). 슬라이드를 넘겨도 본문이 위아래로 움직이지 않는다.
   이동은 runtime(WAAPI 360ms)이 하고, CSS는 정지 위치(left -100% · center 0 · right 100%)와 보임/숨김만 정한다. 편집 썸네일·단일 이미지는 대상이 아니다. */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; overflow: hidden; }
/* 가로로만 잘라 옆 슬라이드를 숨기고, 세로(화살표·점의 포커스 테두리)는 잘리지 않게. clip 미지원 브라우저는 위 hidden 유지. */
@supports (overflow-x: clip) {
  .guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] { overflow: visible; overflow-x: clip; }
}
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure { grid-area: 1 / 1; display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--sj-media-image-height, auto) minmax(var(--sj-media-caption-height, 0px), auto); align-content: start; width: 100% !important; min-width: 0; max-width: 100% !important; height: auto !important; margin: 0 !important; float: none !important; transform: translateX(0); backface-visibility: hidden; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure > img { grid-row: 1; display: block; width: 100% !important; max-width: 100% !important; height: var(--sj-media-image-height, auto) !important; margin: 0 !important; object-fit: contain; object-position: center; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure > figcaption { grid-row: 2; min-width: 0; overflow-wrap: anywhere; }
/* 정지 위치. 이동 중 두 장(visible=true)만 보이고 나머지는 높이 계산을 위해 자리만 유지(display 유지, visibility 숨김). 누르기는 현재 슬라이드만. */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure[data-sj-media-position="left"] { transform: translateX(-100%); }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure[data-sj-media-position="center"] { transform: translateX(0); }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure[data-sj-media-position="right"] { transform: translateX(100%); }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure[data-sj-media-visible="false"] { visibility: hidden; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure[data-sj-media-visible="true"] { visibility: visible; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure[data-sj-media-current="false"] { pointer-events: none; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure[data-sj-media-current="true"] { z-index: 0; pointer-events: auto; }
/* 드래그로 넘기기(공개·편집 다중·업로드 미리보기 공통, 단일·예전 형식 제외). 런타임이 손가락·마우스를 따라 px transform을 주고 놓을 때 전환한다.
   CSS는 커서·기본 이미지 끌기/선택 방지와, 드래그 중 이웃 슬라이드 보이기만 맡는다. 가로만 잡고 세로 스크롤·확대는 위 touch-action(pan-y pinch-zoom) 그대로. */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure > img { cursor: grab; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout] > figure > figcaption { cursor: auto; user-select: text; -webkit-user-select: text; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout][data-sj-media-dragging="true"] { user-select: none; -webkit-user-select: none; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout][data-sj-media-dragging="true"], .guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout][data-sj-media-dragging="true"] * { cursor: grabbing; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout][data-sj-media-dragging="true"] > figure:is([data-sj-media-drag-side="-1"], [data-sj-media-drag-side="0"], [data-sj-media-drag-side="1"]) { visibility: visible; will-change: transform; }
/* 하단형: 컨트롤은 같은 칸의 figure들 아래 둘째 줄(자동 배치) */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout][data-sj-media-template="below"] > .sj-media-controls { grid-area: 2 / 1; }
/* 배너형: 캡션이 없으면 이미지 위 겹침(1/1), 있으면 위 규칙대로 둘째 줄. 컨트롤은 슬라이드보다 위. */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout][data-sj-media-template="banner"] > .sj-media-controls { z-index: 2; }
/* 캡션 없는 배너형: 캐로셀의 align-items:start 때문에 겹친 컨트롤이 내용 높이(48px)로 줄어 화살표·페이지 표시가 이미지 맨 위에 붙지 않도록, 이미지 칸 전체 높이로 늘린다. */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-layout][data-sj-media-template="banner"]:not([data-sj-media-captions="true"]) > .sj-media-controls { align-self: stretch; }

/* ── 편집 다중 모음(슬라이드 레이아웃) 전용 ─────────────────────────────
   큰 이미지 1장 + 실제 좌우 이동 + 고정 높이(공개와 동일). 이미지 추가는 화살표·페이지 표시(겹친 컨트롤)와 분리된 아래 일반 줄(3행). */
.guide-content-carousel[data-sj-media-mode="editing"][data-sj-media-layout] > .sj-media-editor-tools { grid-area: 3 / 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-width: 0; margin: 10px 0 0; padding: 0; }
/* 선택 표시: 캐로셀이 가로를 잘라 바깥 테두리는 좌우가 잘리므로, 현재 슬라이드 안쪽에 얇게(1px). 이미지를 고르면 2px.
   관리 화면 공통 이미지 선택 테두리(offset 4px)는 잘리거나 화살표를 덮으므로 이 안에서는 쓰지 않는다. 화살표·페이지 표시는 그 위(z-index 2). */
.guide-content-carousel[data-sj-media-mode="editing"][data-sj-media-layout] > figure > img[data-content-field] { outline: none !important; }
.guide-content-carousel[data-sj-media-mode="editing"][data-sj-media-layout] > figure[data-sj-media-current="true"] { outline: 1px solid color-mix(in srgb, var(--brand, #315de5), #fff 55%); outline-offset: -1px; }
.guide-content-carousel[data-sj-media-mode="editing"][data-sj-media-layout] > figure[data-sj-media-current="true"]:has(> img[data-admin-selected="true"], > img[data-content-field]:focus) { outline: 2px solid var(--brand, #315de5); outline-offset: -2px; }

/* ── 하단형: 이미지 아래 한 줄 [이전] 페이지 표시 [다음] ─────────────────── */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="below"] > .sj-media-controls { display: flex; flex-wrap: nowrap; min-width: 0; align-items: center; justify-content: center; margin-top: 12px; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="below"] .sj-media-arrow { border-color: #dfe4ec; background: #fff; color: var(--ink-1, var(--ink, #273248)); }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="below"] .sj-media-arrow:hover { border-color: var(--brand, #315de5); color: var(--brand, #315de5); }

/* ── 이전·다음 모양 (템플릿과 독립) ───────────────────────────────────── */
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-navigation="circle"] .sj-media-arrow { border-radius: 999px; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-navigation="square"] .sj-media-arrow { border-radius: 8px; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-navigation="minimal"] .sj-media-arrow { border-color: transparent; border-radius: 8px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-navigation="minimal"] .sj-media-arrow svg { width: 26px; height: 26px; }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"][data-sj-media-navigation="minimal"] .sj-media-arrow { color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"][data-sj-media-navigation="minimal"] .sj-media-arrow:hover { background: rgba(10,14,26,.24); }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="below"][data-sj-media-navigation="minimal"] .sj-media-arrow:hover { background: var(--brand-soft, #edf3ff); }
.guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-navigation="none"] .sj-media-arrow { display: none; }

@media (max-width: 640px), (pointer: coarse) {
  :is(.guide-content-carousel, :where(figure.guide-content-image, figure.image)[data-sj-media-mode="editing"]) .sj-media-add { min-height: 44px; }
  .guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout])) .sj-media-dot { min-width: 32px; height: 44px; }
  .guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-pagination="bars"] .sj-media-dot { min-width: 28px; }
  .guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] > .sj-media-controls { padding: 0 8px; }
  .guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] .sj-media-arrow { width: 44px; height: 44px; }
  .guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="banner"] .sj-media-pagination { bottom: 8px; padding: 0 8px; }
  .guide-content-carousel:is([data-sj-media-mode="public"], [data-sj-media-mode="editing"]:where([data-sj-media-layout]))[data-sj-media-template="below"] > .sj-media-controls { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-content-carousel { scroll-behavior: auto; }
  :is(.guide-content-carousel, :where(figure.guide-content-image, figure.image)[data-sj-media-mode="editing"]) > .sj-media-controls *, :is(.guide-content-carousel, :where(figure.guide-content-image, figure.image)[data-sj-media-mode="editing"]) > .sj-media-controls *::before { transition: none; animation: none; }
}