/* 캔버스 삽입 위치의 이미지 업로드 상태(편집 전용). 공개 안내 스타일(ck-content의 ul·li·img·p·button)이 들어오지 않게 초기화한다. */
.fmu { --fmu-ok: #23815b; --fmu-error: #c0453f; --fmu-line: #dfe6f1; box-sizing: border-box; margin: 12px 0; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--brand, #315de5), #fff 45%); border-radius: 10px; background: #f7f9fd; color: #344057; font: 500 13px/1.45 Pretendard, sans-serif; text-align: left; }
.fmu[hidden] { display: none !important; }
.fmu *, .fmu *::before, .fmu *::after { box-sizing: border-box; }
.fmu[data-result="success"] { border-style: solid; border-color: color-mix(in srgb, var(--fmu-ok), #fff 60%); background: #f3faf6; }
.fmu[data-result="error"] { border-style: solid; border-color: color-mix(in srgb, var(--fmu-error), #fff 60%); background: #fdf5f4; }
.fmu .fmu-head { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0 0 8px; }
.fmu .fmu-title { flex: 1; min-width: 0; margin: 0; padding: 0; color: #344057; font-size: 13px; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; }
.fmu .fmu-close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #6b768a; cursor: pointer; }
.fmu .fmu-close:hover:not(:disabled) { background: #fff; color: #344057; }
.fmu .fmu-close:disabled { opacity: .35; cursor: default; }
.fmu .fmu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fmu .fmu-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; padding: 0; }
.fmu .fmu-item::marker { content: none; }
.fmu .fmu-thumb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--fmu-line); border-radius: 8px; background: #eef2f8; }
.fmu .fmu-thumb > img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
.fmu .fmu-item[data-status="waiting"] .fmu-thumb > img, .fmu .fmu-item[data-status="uploading"] .fmu-thumb > img { opacity: .55; }
.fmu .fmu-item[data-status="error"] .fmu-thumb { border-color: color-mix(in srgb, var(--fmu-error), #fff 45%); }
/* 상태 표시: 대기(점) · 올리는 중(스피너) · 완료(초록 체크) · 실패(!) */
.fmu .fmu-badge { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #17203333; }
.fmu .fmu-item[data-status="waiting"] .fmu-badge::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #9aa8bf; }
.fmu .fmu-item[data-status="uploading"] .fmu-badge::after { content: ""; position: absolute; inset: 4px; border: 2px solid #dce5f4; border-top-color: var(--brand, #315de5); border-radius: 50%; animation: fmu-spin .8s linear infinite; }
.fmu .fmu-item[data-status="success"] .fmu-badge { background: var(--fmu-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m6.5 11.3 3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.fmu .fmu-item[data-status="error"] .fmu-badge { background: var(--fmu-error); }
.fmu .fmu-item[data-status="error"] .fmu-badge::after { content: "!"; position: absolute; inset: 0; color: #fff; font: 800 13px/22px Pretendard, sans-serif; text-align: center; }
.fmu .fmu-bar { position: absolute; right: 6px; bottom: 6px; left: 6px; display: none; height: 4px; overflow: hidden; border-radius: 2px; background: #ffffffcc; }
.fmu .fmu-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--brand, #315de5); transition: width .2s; }
.fmu .fmu-item.has-progress .fmu-bar { display: block; }
.fmu .fmu-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fmu .fmu-name { overflow: hidden; color: #344057; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.fmu .fmu-state { color: #6b768a; font-size: 11.5px; overflow-wrap: anywhere; }
.fmu .fmu-item[data-status="success"] .fmu-state { color: var(--fmu-ok); font-weight: 650; }
.fmu .fmu-item[data-status="error"] .fmu-state { color: var(--fmu-error); font-weight: 650; }
.fmu .fmu-retry { align-self: flex-start; min-height: 32px; margin: 3px 0 0; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--fmu-error), #fff 55%); border-radius: 7px; background: #fff; color: var(--fmu-error); font: 700 12px/1.3 Pretendard, sans-serif; cursor: pointer; }
.fmu .fmu-retry[hidden] { display: none; }
.fmu .fmu-retry:hover:not(:disabled) { border-color: var(--fmu-error); background: #fff4f3; }
.fmu .fmu-retry:disabled { opacity: .45; cursor: default; }
.fmu :is(.fmu-close, .fmu-retry):focus-visible { outline: 2px solid var(--brand, #315de5); outline-offset: 2px; }
/* 1장: 큰 빈 공간 없이 작은 썸네일 + 이름·상태 한 줄 */
.fmu.is-single .fmu-list { display: block; }
.fmu.is-single .fmu-item { flex-direction: row; align-items: center; gap: 10px; }
.fmu.is-single .fmu-thumb { flex: none; width: 72px; }
.fmu.is-single .fmu-badge { top: 4px; right: 4px; width: 20px; height: 20px; }
.fmu.is-single .fmu-item[data-status="success"] .fmu-badge { background-size: 20px; }
.fmu.is-single .fmu-item[data-status="error"] .fmu-badge::after { line-height: 20px; }
.fmu.is-single .fmu-meta { flex: 1; }
@keyframes fmu-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px), (pointer: coarse) {
  .fmu .fmu-close { width: 44px; height: 44px; margin: -8px -10px -8px 0; }
  .fmu .fmu-retry { min-height: 44px; padding: 8px 12px; }
  .fmu .fmu-list { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .fmu .fmu-item[data-status="uploading"] .fmu-badge::after { animation-duration: 2s; }
  .fmu .fmu-bar > span { transition: none; }
}

/* ── 업로드 단계 슬라이드 미리보기(.fmu-preview): 올리는 중에도 실제 캐로셀(배너형·하단형, 실제 좌우 이동)로 확인 ─────────────
   캐로셀 모양·이동은 공개 런타임(content-media.css)을 그대로 쓰고, 여기서는 미리보기 판·단일 이미지·준비 중 표시·썸네일 선택만 정한다.
   모든 규칙은 .fmu 범위라 공개 안내(ck-content의 figure·img·button·p) 스타일이 들어오지 않는다. 이미지는 크롭하지 않는다. */
.fmu .fmu-preview { position: relative; min-width: 0; margin: 0 0 10px; padding: 8px; border: 1px solid var(--fmu-line); border-radius: 10px; background: #fff; }
.fmu .fmu-preview[hidden] { display: none !important; }
.fmu .fmu-preview .fmu-preview-carousel { max-width: 100%; min-width: 0; margin: 0; padding: 0; }
/* 단일 이미지(런타임이 슬라이드 레이아웃을 붙이지 않음): 폭 100% · 최대 높이 320px · 전체 보이기 */
.fmu .fmu-preview .fmu-preview-carousel > figure.fmu-preview-slide { min-width: 0; margin: 0; padding: 0; }
.fmu .fmu-preview .fmu-preview-carousel:not([data-sj-media-layout]) > figure.fmu-preview-slide { display: block; width: 100%; max-width: 100%; float: none; }
.fmu .fmu-preview .fmu-preview-carousel:not([data-sj-media-layout]) > figure.fmu-preview-slide > img { display: block; width: 100%; min-width: 0; max-width: 100%; height: auto; max-height: 320px; margin: 0 auto; object-fit: contain; }
/* 미리보기 준비 중: 주소 없는 이미지는 숨기고 같은 자리에 안내. 여러 장이면 이미지 행(1행)에 겹쳐 가운데, 1장이면 안정된 16:9 높이(최대 320px). */
.fmu .fmu-preview .fmu-preview-slide.is-empty > img { display: none !important; }
.fmu .fmu-preview .fmu-preview-placeholder { display: grid; place-items: center; min-width: 0; margin: 0; padding: 12px; border-radius: 6px; background: #eef2f8; color: #6b768a; font-size: 12.5px; font-weight: 650; line-height: 1.4; text-align: center; }
.fmu .fmu-preview .fmu-preview-carousel[data-sj-media-layout] > .fmu-preview-slide.is-empty > .fmu-preview-placeholder { grid-row: 1; grid-column: 1; align-self: stretch; height: 100%; }
.fmu .fmu-preview .fmu-preview-carousel:not([data-sj-media-layout]) > .fmu-preview-slide.is-empty > .fmu-preview-placeholder { width: 100%; aspect-ratio: 16 / 9; max-height: 320px; }
.fmu .fmu-preview .fmu-preview-slide:not(.is-empty) > .fmu-preview-placeholder { display: none; }

/* 썸네일이 슬라이드 선택 버튼(button.fmu-thumb, aria-pressed)이 됨: 기본 버튼 모양 초기화, 선택은 테마색 링. 상태 배지·진행 막대는 그대로. */
.fmu button.fmu-thumb { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer; }
.fmu button.fmu-thumb:hover { border-color: color-mix(in srgb, var(--brand, #315de5), #fff 45%); }
.fmu button.fmu-thumb[aria-pressed="true"] { border-color: var(--brand, #315de5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #315de5), #fff 65%); }
.fmu button.fmu-thumb:focus-visible { outline: 2px solid var(--brand, #315de5); outline-offset: 2px; }
.fmu button.fmu-thumb:disabled { cursor: default; }
/* 1장 상태 줄 썸네일(72px, 높이 54px)과 여러 장 격자 썸네일 모두 누르는 영역 44px 이상. */
.fmu.is-single button.fmu-thumb { min-height: 44px; }
@media (max-width: 640px) {
  .fmu .fmu-preview { padding: 6px; }
}

/* 업로드 성공: 큰 완료 문구 대신 주 미리보기 이미지 프레임 우상단에 작은 초록 체크(장식, aria-hidden).
   절대 위치라 캐로셀 figure의 grid 행(이미지·캡션) 높이를 바꾸지 않는다. 다중 슬라이드 figure는 transform이 기준이 되고, 단일은 relative 기준. */
.fmu .fmu-preview .fmu-preview-carousel > figure.fmu-preview-slide { position: relative; }
.fmu .fmu-preview .fmu-preview-success { position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 50%; background: var(--fmu-ok); color: #fff; box-shadow: 0 1px 4px #17203340; pointer-events: none; }
.fmu .fmu-preview .fmu-preview-success[hidden] { display: none !important; }
.fmu .fmu-preview .fmu-preview-success > svg { display: block; width: 18px; height: 18px; }
/* 성공 문구는 화면에서만 숨기고(aria-live 안내 유지), 닫기는 아래 상태 줄 오른쪽 끝으로 옮겨 머리 줄 높이를 없앤다.
   대기·올리는 중·실패는 기존 머리 줄(합계 문구 + 닫기) 그대로. */
.fmu[data-result="success"] { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: start; }
.fmu[data-result="success"] > .fmu-preview { grid-column: 1 / -1; grid-row: 1; }
.fmu[data-result="success"] > .fmu-list { grid-column: 1; grid-row: 2; }
.fmu[data-result="success"] > .fmu-head { grid-column: 2; grid-row: 2; min-height: 0; margin: 0; }
.fmu[data-result="success"].is-single > .fmu-head { align-self: center; }
.fmu[data-result="success"] .fmu-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.fmu[data-result="success"] .fmu-close { margin: 0; }
@media (max-width: 640px) {
  .fmu .fmu-preview .fmu-preview-success { top: 6px; right: 6px; width: 26px; height: 26px; }
  .fmu .fmu-preview .fmu-preview-success > svg { width: 16px; height: 16px; }
}
@media (max-width: 640px), (pointer: coarse) {
  .fmu[data-result="success"] .fmu-close { margin: 0 -6px 0 0; }
}