/* ================================================================
   미리클 구좌 오버레이 (슬라이드 밖 공통 안내 자리)
   설계 정본: ../PPT 편집 맥락 진입점/UXUI_상세설계_구좌_20261001.md
   카드는 우하단 하나만 쓴다(2026-10-02 지시). 모양은 이미지 분해 카드와 같다.
   ================================================================ */

.sl-root{box-sizing:border-box}
.sl-root[hidden]{display:none}

/* ── 자리 계산 값: slot-overlay.js 가 화면 크기에 맞춰 넣는다 ── */
.sl-root{
  --sl-bot:68px;   /* mds-new-spec: 오른쪽 아래 모달의 아래쪽 간격(화면 기준, 2026-10-12 실제 에디터에서 확인. 런타임으로 덮어씀) */
  --sl-left:432px; /* mds-new-spec: 좌패널 오른쪽 끝(런타임으로 덮어씀) */
  --sl-pl:84px;    /* mds-new-spec: 좌패널 안쪽 시작(런타임으로 덮어씀) */
  --sl-pw:336px;   /* mds-new-spec: 좌패널 안쪽 폭(런타임으로 덮어씀) */
  --sl-top:128px;  /* mds-new-spec: 상단 툴바 아래(런타임으로 덮어씀) */
  --sl-grid:color-mix(in srgb,var(--mds-s-color-neutral-contents-additional) 14%,transparent);   /* 투명 표시 모눈의 어두운 칸 */
  --sl-mh:156px;   /* mds-new-spec: 미리보기 높이. 이미지 분해 카드의 사진 자리(286x156)와 같다 */
}

/* ── 카드 본체 ─────────────────────────────────────────
   이미지 분해의 업로드 직후 AI 편집 카드(.is-card)와 같은 구조·여백이다(2026-10-04 지시).
   카드 자체에는 안쪽 여백이 없고 머리(높이 52) · 미리보기(높이 156, 좌우 12) · 본문(위 12, 좌우 16) · 버튼 줄(위 12, 좌우 16, 아래 16)이
   각자 여백을 가진다. 자리는 우하단 하나만 쓴다 */
.sl-root{
  position:fixed;z-index:97;right:var(--sl-right,16px);bottom:var(--sl-bot);width:310px; /* mds-new-spec: 이미지 분해 카드와 같은 폭 */
  display:flex;flex-direction:column;overflow:hidden;max-height:var(--sl-maxh,none); /* 위쪽 자리가 모자라면 slot-overlay.js 가 값을 넣고, 본문만 스크롤한다 */
  border-radius:calc(var(--mds-b-radius-60) * 1px);
  background:var(--mds-s-color-neutral-background-defaultinverse);
  box-shadow:var(--mds-s-shadow-popover);
  color:var(--mds-s-color-neutral-contents-inverse-default);
  word-break:keep-all; /* 한국어를 단어 단위로 줄바꿈한다 */
  font-size:calc(var(--mds-b-fontsize-14) * 1px);
  line-height:calc(var(--mds-b-lineheight-rem-14) * 1px);
  transition:transform calc(var(--mds-b-duration-40) * 1ms) ease,opacity calc(var(--mds-b-duration-40) * 1ms) ease,bottom calc(var(--mds-b-duration-40) * 1ms) ease; /* 스낵바가 뜨고 사라질 때 카드가 부드럽게 올라가고 내려온다 */
}
.sl-root[data-open="0"]{transform:translateY(8px);opacity:0;pointer-events:none} /* 접힐 때 */

.sl-head{flex:none;box-sizing:border-box;height:52px;display:flex;align-items:center;gap:calc(var(--mds-b-spacing-40) * 1px);padding:0 calc(var(--mds-b-spacing-70) * 1px)} /* mds-new-spec: 이미지 분해 카드와 같은 머리 높이 */
.sl-ai{display:block;flex:none;width:24px;height:24px} /* mds-new-spec: 이미지 분해 카드와 같은 AI 로고 크기 */
.sl-title{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-weight:var(--mds-b-fontweight-semibold);font-size:calc(var(--mds-b-fontsize-14) * 1px);line-height:calc(var(--mds-b-lineheight-rem-14) * 1px);color:var(--mds-s-color-neutral-contents-inverse-default)}
.sl-x{flex:none;border:none;background:none;cursor:pointer;width:28px;height:28px;margin:calc(var(--mds-b-spacing-20) * -1px);border-radius:calc(var(--mds-b-radius-30) * 1px);display:grid;place-items:center;padding:0;color:var(--mds-s-color-neutral-contents-inverse-sub)} /* mds-new-spec: 닫기 누름 영역. 글자 크기는 이미지 분해 카드와 같이 따로 두지 않는다 */
.sl-x:hover{color:var(--mds-s-color-neutral-contents-inverse-default);background:var(--mds-s-color-neutral-surface-inverse-light)}
.sl-x svg{display:block}
.sl-x:focus-visible{outline:calc(var(--mds-b-borderwidth-20) * 1px) solid var(--mds-s-color-brand-primary-light);outline-offset:calc(var(--mds-b-spacing-10) * 1px)}
.sl-retry-note{font-size:calc(var(--mds-b-fontsize-12) * 1px);line-height:calc(var(--mds-b-lineheight-rem-12) * 1px);color:var(--mds-s-color-neutral-contents-inverse-sub);text-align:center;padding:0 calc(var(--mds-b-spacing-40) * 1px)}

/* 미리보기와 본문은 한 덩어리(.sl-body)다. 위쪽 자리가 정말 모자랄 때만 이 덩어리가 스크롤하고 머리와 버튼 줄은 그대로 있다 */
.sl-body{flex:1 1 auto;min-height:0}
.sl-root[data-fit="scroll"] .sl-body{overflow:auto}
.sl-root[data-fit="scroll"] .sl-body::-webkit-scrollbar{width:calc(var(--mds-c-scrollview-size-thumb-thin) * 1px)}
.sl-root[data-fit="scroll"] .sl-body::-webkit-scrollbar-thumb{background:var(--mds-s-color-neutral-surface-inverse-medium);border-radius:calc(var(--mds-b-radius-pill) * 1px)}
.sl-main{display:flex;flex-direction:column;gap:calc(var(--mds-b-spacing-30) * 1px);padding:calc(var(--mds-b-spacing-60) * 1px) calc(var(--mds-b-spacing-70) * 1px) 0}
.sl-main[data-end="1"]{padding-bottom:calc(var(--mds-b-spacing-70) * 1px)} /* 버튼 줄이 없는 상태(적용 뒤)는 본문이 아래 여백 16을 가진다 */
.sl-text{margin:0;font-weight:var(--mds-b-fontweight-regular);color:var(--mds-s-color-neutral-contents-inverse-default);text-wrap:pretty} /* 제목은 굵게, 본문은 보통 굵기. 둘 다 흰색(이미지 분해 카드와 같다) */
.sl-sub{margin:0;font-size:calc(var(--mds-b-fontsize-12) * 1px);line-height:calc(var(--mds-b-lineheight-rem-12) * 1px);color:var(--mds-s-color-neutral-contents-inverse-sub)}

.sl-foot{flex:none;display:flex;flex-direction:column;gap:calc(var(--mds-b-spacing-40) * 1px);padding:calc(var(--mds-b-spacing-60) * 1px) calc(var(--mds-b-spacing-70) * 1px) calc(var(--mds-b-spacing-70) * 1px)}
/* 주 버튼: 이미지 분해 카드의 버튼(.is-btn)과 같다. 높이 40 · 모서리 8 · 글자 14 굵게 */
.sl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--mds-b-spacing-20) * 1px);
  width:100%;height:calc(var(--mds-c-commonbutton-size-height-m) * 1px);padding:0 calc(var(--mds-b-spacing-70) * 1px);box-sizing:border-box;
  border:none;cursor:pointer;
  border-radius:calc(var(--mds-c-commonbutton-radius-square-m) * 1px);
  color:var(--mds-s-color-neutral-contents-inverse-default);
  font:var(--mds-c-commonbutton-typography-m);font-weight:var(--mds-b-fontweight-semibold);
}
.sl-btn{background:var(--mds-s-color-brand-primary-default)}
.sl-btn[disabled]{cursor:default}
.sl-btn[data-loading="1"]::before{
  content:"";width:14px;height:14px;border-radius:50%; /* mds-new-spec: 진행 표시 크기·모양 */
  border:2px solid currentColor;border-top-color:transparent; /* mds-new-spec: 진행 표시 두께 */
  animation:slSpin .8s linear infinite; /* mds-new-spec: 진행 표시 속도 */
}
@keyframes slSpin{to{transform:rotate(360deg)}}
.sl-btn:focus-visible{outline:calc(var(--mds-b-borderwidth-20) * 1px) solid var(--mds-s-color-brand-primary-accessible);outline-offset:calc(var(--mds-b-spacing-10) * 1px)}
.sl-more{
  border:none;background:none;cursor:pointer;padding:0;text-align:left;
  font-size:calc(var(--mds-b-fontsize-12) * 1px);color:var(--mds-s-color-brand-primary-light);font-weight:var(--mds-b-fontweight-medium);
}

/* ── 미리보기 ─────────────────────────────────────────── */
/* 사진 자리는 이미지 분해 카드와 같다: 높이 156 · 좌우 여백 12(안쪽 286). 전·후 두 장도 이 자리를 꽉 채운다 */
.sl-media{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--sl-mh);padding:0 calc(var(--mds-b-spacing-60) * 1px);overflow:hidden}
.sl-media:has(> .sl-cmp){height:auto}   /* 전·후 썸네일은 정방형이라 높이는 칸 폭이 정한다 */
.sl-cmp{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:calc(var(--mds-b-spacing-40) * 1px);width:100%}
.sl-cmp > .sl-pane{aspect-ratio:1 / 1}
.sl-pane{
  position:relative;min-height:0;overflow:hidden;
  border-radius:calc(var(--mds-b-radius-40) * 1px);
  clip-path:inset(0 round calc(var(--mds-b-radius-40) * 1px)); /* 흐림(backdrop-filter)과 움직이는 빛이 있으면 overflow 만으로는 모서리가 잘리지 않아 한 번 더 자른다 */
  background-color:var(--mds-s-color-neutral-surface-inverse-light);
  background-image:var(--sl-img);background-repeat:no-repeat;background-position:center;
  background-size:var(--sl-zoom,contain);
}
.sl-pane[data-k="bg-after"]{   /* 지운 결과는 투명 표시 모눈 위에 올린다(슬라이드 배경색을 따지지 않는다) */
  background-color:var(--mds-s-color-neutral-background-default);
  background-image:var(--sl-img),conic-gradient(var(--sl-grid) 0 25%,transparent 0 50%,var(--sl-grid) 0 75%,transparent 0);
  background-size:contain,calc(var(--mds-b-spacing-40) * 2px) calc(var(--mds-b-spacing-40) * 2px);
  background-position:center,0 0;background-repeat:no-repeat,repeat;
}
.sl-pane[data-k="bg-before"],.sl-pane[data-k="bg-after"]{--sl-zoom:contain}
/* 화질 개선 전·후: 사진 전체가 꽉 차게 보이다가 가운데를 천천히 확대하고, 확대한 상태에서 멈춘다(반복 없음).
   확대 배율(--sl-z)은 slot-overlay.js 가 사진 비율에 맞춰 넣는다. 끝 모습은 칸 폭의 4배 */
.sl-pane[data-k="up-before"],.sl-pane[data-k="up-after"]{background-image:none;overflow:hidden}
.sl-pane[data-k="up-before"]::before,.sl-pane[data-k="up-after"]::before{
  content:"";position:absolute;inset:0;
  background:var(--sl-img) 50% 50% / contain no-repeat;
  transform-origin:50% 50%;
  animation:slZoom 3.2s cubic-bezier(.45,0,.2,1) .7s 1 both; /* mds-new-spec: 확대 길이·시작 전 멈춤 */
}
@keyframes slZoom{from{transform:scale(1)}to{transform:scale(var(--sl-z,5))}}
.sl-pane[data-k="up-before"]{image-rendering:auto}
.sl-pane[data-k="single"]{grid-column:1 / -1;--sl-zoom:contain}
.sl-pane[data-wide="1"]{grid-column:1 / -1}
.sl-tag{
  position:absolute;left:calc(var(--mds-b-spacing-30) * 1px);top:calc(var(--mds-b-spacing-30) * 1px);
  padding:0 calc(var(--mds-b-spacing-40) * 1px);border-radius:calc(var(--mds-c-badge-radius-round) * 1px); /* 전·후 배지는 양끝이 둥근 모양 */
  background:color-mix(in srgb, var(--mds-s-color-neutral-surface-darkness) 60%, transparent);color:var(--mds-s-color-neutral-contents-inverse-default); /* mds-new-spec: 전·후 배지 바탕 농도(사진이 비치게) */
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); /* mds-new-spec: 배지 뒤 흐림 */
  font-size:calc(var(--mds-b-fontsize-12) * 1px);line-height:calc(var(--mds-b-lineheight-rem-14) * 1px);
}
/* 결과를 만드는 중이거나 아직 없을 때: 문제 표시 한 장만 보여 준다 */
.sl-prob-badge{
  position:absolute;right:calc(var(--mds-b-spacing-30) * 1px);bottom:calc(var(--mds-b-spacing-30) * 1px);
  padding:0 calc(var(--mds-b-spacing-40) * 1px);border-radius:calc(var(--mds-b-radius-30) * 1px);
  background:var(--mds-s-color-neutral-surface-darkness);color:var(--mds-s-color-neutral-contents-inverse-default);
  font-size:calc(var(--mds-b-fontsize-12) * 1px);line-height:calc(var(--mds-b-lineheight-rem-14) * 1px);
}
.sl-shimmer{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,var(--mds-s-color-brand-primary-opacitymedium) 50%,transparent 70%); /* mds-new-spec: 준비 중 반짝임 폭 */
  background-size:220% 100%; /* mds-new-spec: 반짝임 이동 거리 */
  animation:slShimmer 1.6s linear infinite; /* mds-new-spec: 반짝임 속도 */
}
@keyframes slShimmer{from{background-position:120% 0}to{background-position:-120% 0}} /* mds-new-spec: 반짝임 이동 범위 */

/* 이미지 확장: 생성 결과를 미리 만들지 않으므로 채워진 모습을 흉내 내지 않는다. 사진은 프레임 가운데에 그대로 두고,
   위아래(또는 좌우) 빈 공간에 AI 빛이 사진 가장자리에서 바깥으로 퍼지며 차는 모습만 보여 준다 */
.sl-ox{display:grid;place-items:center;width:100%;height:100%}
.sl-ox-frame{
  position:relative;width:min(100%,calc(var(--sl-mh) * var(--fr)));aspect-ratio:var(--fr); /* 사진 자리(286x156) 안에서 프레임 비율 그대로 가장 크게(이미지 분해 카드의 사진 상자와 같은 방식) */
  border-radius:calc(var(--mds-b-radius-40) * 1px);overflow:hidden;
  background:var(--mds-s-color-neutral-surface-inverse-light); /* 채워지기 전 프레임 자리를 옅은 면으로 보여 준다 */
}
.sl-ox-img{position:absolute;background:var(--sl-img) 50% 50% / 100% 100% no-repeat}
.sl-ox[data-dir="v"] .sl-ox-img{left:0;right:0;top:calc(var(--insn,0) * 1cqh);bottom:calc(var(--insn,0) * 1cqh)}
.sl-ox[data-dir="h"] .sl-ox-img{top:0;bottom:0;left:calc(var(--insn,0) * 1cqw);right:calc(var(--insn,0) * 1cqw)}
/* 구좌 카드 AI 색(내 화면 참조 가운데 요소가 쓴다). imagesplit-overlay.css 의 .is-fx 와 같은 값 */
.sl-root{
  --sl-ai-cyan:#1AC5EA; /* mds-new-spec: AI 하늘색 */
  --sl-ai-pink:#FF67CB; /* mds-new-spec: AI 분홍 */
}
/* 빈 공간 표시(2026-10-14 지시): 사진을 프레임을 덮도록 키워 흐리게 뭉갠 그림이 사진 가장자리에서 바깥으로 퍼져 나간다.
   퍼지는 앞쪽 끝은 페더 마스크(점점 옅어지는 가림막)라 선이 보이지 않는다. 흐리게 뭉개서 채운 결과처럼 보이는 세부는 없다 */
.sl-ox-fill{
  position:absolute;overflow:hidden;
  animation:5.2s cubic-bezier(.4,0,.2,1) infinite both; /* mds-new-spec: 한 바퀴 길이 */
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.sl-ox[data-dir="v"] .sl-ox-fill{left:0;right:0;height:calc(var(--insn,0) * 1cqh);animation-name:slOxMV;
  -webkit-mask-size:100% 300%;mask-size:100% 300%;-webkit-mask-position:0 var(--ox-vis);mask-position:0 var(--ox-vis)}
.sl-ox[data-dir="h"] .sl-ox-fill{top:0;bottom:0;width:calc(var(--insn,0) * 1cqw);animation-name:slOxMH;
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:var(--ox-vis) 0;mask-position:var(--ox-vis) 0}
/* --ox-to: 사진 가장자리에서 프레임 끝으로 향하는 방향. --ox-vis · --ox-hid: 마스크가 모두 보이는 자리 · 모두 가려지는 자리(마스크 그림은 빈 공간 길이의 3배) */
.sl-ox[data-dir="v"] .sl-ox-fill.is-a{top:0;--ox-to:to top;--ox-vis:100%;--ox-hid:0%}
.sl-ox[data-dir="v"] .sl-ox-fill.is-b{bottom:0;--ox-to:to bottom;--ox-vis:0%;--ox-hid:100%}
.sl-ox[data-dir="h"] .sl-ox-fill.is-a{left:0;--ox-to:to left;--ox-vis:100%;--ox-hid:0%}
.sl-ox[data-dir="h"] .sl-ox-fill.is-b{right:0;--ox-to:to right;--ox-vis:0%;--ox-hid:100%}
.sl-ox-fill{
  -webkit-mask-image:linear-gradient(var(--ox-to), #000 36%, transparent 64%); /* mds-new-spec: 퍼지는 끝을 흐리는 가림막(모양) */
  mask-image:linear-gradient(var(--ox-to), #000 36%, transparent 64%); /* mds-new-spec: 같은 가림막 */
}
/* 흐리게 뭉갠 큰 사진: 프레임 전체 크기로 깔고(사진을 키워 프레임을 덮음) 빈 공간 칸만 보인다. 흐림이 만드는 가장자리 옅어짐은 키워서 밖으로 뺀다 */
.sl-ox-fill::before{
  content:"";position:absolute;width:100cqw;height:100cqh;
  background:var(--sl-img) 50% 50% / cover no-repeat;
  filter:blur(12px) saturate(1.1); /* mds-new-spec: 뭉개는 정도 */
  transform:scale(1.25); /* mds-new-spec: 흐림 가장자리를 밖으로 빼는 확대 */
}
.sl-ox[data-dir="h"] .sl-ox-fill.is-a::before,.sl-ox[data-dir="v"] .sl-ox-fill.is-a::before{left:0;top:0}
.sl-ox[data-dir="h"] .sl-ox-fill.is-b::before{right:0;top:0}
.sl-ox[data-dir="v"] .sl-ox-fill.is-b::before{left:0;bottom:0}
/* 사진 쪽 가장자리에서 바깥으로 퍼지며 보이고, 한동안 머문 뒤 사라지고 처음으로 돌아간다 */
@keyframes slOxMH{
  0%,10%{-webkit-mask-position:var(--ox-hid) 0;mask-position:var(--ox-hid) 0;opacity:1}
  58%,90%{-webkit-mask-position:var(--ox-vis) 0;mask-position:var(--ox-vis) 0;opacity:1}
  100%{-webkit-mask-position:var(--ox-vis) 0;mask-position:var(--ox-vis) 0;opacity:0}
}
@keyframes slOxMV{
  0%,10%{-webkit-mask-position:0 var(--ox-hid);mask-position:0 var(--ox-hid);opacity:1}
  58%,90%{-webkit-mask-position:0 var(--ox-vis);mask-position:0 var(--ox-vis);opacity:1}
  100%{-webkit-mask-position:0 var(--ox-vis);mask-position:0 var(--ox-vis);opacity:0}
}
/* 이미지 확장 카드도 전·후 썸네일의 "후"와 같은 색이 도는 테두리 빛을 프레임 둘레에 쓴다(26.10.14 지시. 이전에는 .sl-ox .is-fx 를 숨겼다) */
@keyframes slOxRing{0%,40%{opacity:0}62%,92%{opacity:1}100%{opacity:0}}

/* 내 화면 참조: 지금 페이지 위에 이미지 분해와 같은 AI 빛 */
.sl-fxbox{
  position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;
  container-type:inline-size;
}
.sl-fxphoto{clip-path:inset(0 round calc(var(--mds-b-radius-30) * 1px));position:relative;width:min(100%,calc(var(--sl-mh) * var(--ir,1)));aspect-ratio:var(--ir,1);border-radius:calc(var(--mds-b-radius-30) * 1px);overflow:hidden;background:var(--sl-img) center/cover no-repeat} /* mds-new-spec: 사진을 상자 안쪽에 두는 비율 */
.sl-fxphoto .is-fx{position:absolute;inset:0}

/* 내 화면 참조: 페이지 그림(페이지 목록 썸네일의 사본)을 가운데 기준으로 키워 보여 주고, 요소 하나가 생길 자리를 점선 상자와 반짝이는 AI 표시로 보인다.
   결과는 미리 만들지 않으므로 채워진 모습을 흉내 내지 않는다. 테두리의 AI 빛은 전·후 썸네일의 "후"와 같다 */
.sl-pr-page{background:var(--mds-s-color-neutral-background-default)}
.sl-pr-page .pl-canvas{z-index:0} /* 캔버스는 항상 프레젠테이션(1920×1080, 16:9)이라 확대하지 않고 전체가 보이게 한다 */
.sl-pr-slot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:32%;aspect-ratio:1/1;max-height:68%; /* mds-new-spec: 생길 요소 자리 크기 */
  display:grid;place-items:center;border-radius:calc(var(--mds-b-radius-pill) * 1px); /* 동그란 요소 */
  /* 점선 상자는 빈 구멍처럼 보였다. 페이지 위에 올려 둔 요소처럼 면 · 테두리 · 그림자를 준다. 면은 옅게 해서 가운데 별의 AI 그라데이션이 돋보이게 한다 */
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--sl-ai-cyan) 14%, var(--mds-s-color-neutral-background-default)), /* mds-new-spec: 요소 면의 AI 하늘색 농도 */
    color-mix(in srgb, var(--sl-ai-pink) 12%, var(--mds-s-color-neutral-background-default))); /* mds-new-spec: 요소 면의 AI 분홍 농도 */
  border:calc(var(--mds-b-borderwidth-10) * 1px) solid color-mix(in srgb, var(--mds-s-color-neutral-background-default) 85%, transparent);
  box-shadow:var(--mds-s-shadow-popover), 0 10px 22px color-mix(in srgb, var(--sl-ai-cyan) 24%, transparent); /* mds-new-spec: 요소 아래 AI 빛 그림자 */
  animation:slPrFloat 3.4s ease-in-out infinite; /* mds-new-spec: 요소가 살짝 떠 있는 움직임 */
}
@keyframes slPrFloat{0%,100%{translate:0 0}50%{translate:0 -3px}} /* mds-new-spec: 떠 있는 높이 */
.sl-pr-spark{display:grid;place-items:center;width:40px;height:40px} /* mds-new-spec: AI 별 크기(가만히 둔다. 크기와 불투명도를 바꾸지 않는다) */
.sl-pr-spark .sl-ai{width:100%;height:100%}
@media (prefers-reduced-motion: reduce){.sl-pr-slot{animation:none}}

/* ── 적용 뒤 학습 안내 ────────────────────────────────── */
.sl-post{display:flex;flex-direction:column;gap:calc(var(--mds-b-spacing-40) * 1px)}
.sl-post-ok{font-weight:var(--mds-b-fontweight-semibold)}

/* ── 결과를 만드는 중: 원래 사진과 같은 크기의 스켈레톤 ──── */
/* 생성 중 '후' 자리: 같은 사진을 흐리고 어둡게 깔고, 이미지 분해와 같은 AI 빛(번짐·띠·별)이 돈다 */
.sl-skel{display:grid;place-content:center;justify-items:center;gap:calc(var(--mds-b-spacing-30) * 1px)}
.sl-skel-veil{
  position:absolute;inset:0;
  backdrop-filter:blur(10px); /* mds-new-spec: 생성 중 사진 흐림 */
  background:color-mix(in srgb, var(--mds-s-color-neutral-background-defaultinverse) 40%, transparent); /* mds-new-spec: 생성 중 어둡게 */
}
.sl-skel .is-fx{z-index:1}
.sl-pane .is-fx,.sl-fxphoto .is-fx{border-radius:inherit} /* 테두리 빛도 사진 칸과 같은 둥근 모서리를 따른다 */
.sl-skel .sl-skel-ai,.sl-skel .sl-skel-txt,.sl-skel .sl-tag{z-index:2}
.sl-skel-ai{position:relative;display:grid;color:var(--mds-s-color-neutral-contents-inverse-default);animation:slPulse 1.6s ease-in-out infinite} /* mds-new-spec: 로딩 AI 표시 맥박 */
.sl-skel-txt{position:relative;font-size:calc(var(--mds-b-fontsize-12) * 1px);line-height:calc(var(--mds-b-lineheight-rem-12) * 1px);color:var(--mds-s-color-neutral-contents-inverse-default);text-align:center}

/* ── 진행 표시(여러 장 처리) ──────────────────────────── */
.sl-prog{height:8px;border-radius:calc(var(--mds-b-radius-30) * 1px);background:var(--mds-s-color-neutral-surface-inverse-light);overflow:hidden} /* mds-new-spec: 진행 표시 높이 */
.sl-prog-bar{display:block;height:100%;width:var(--p,0%);background:var(--mds-s-color-brand-primary-light);transition:width calc(var(--mds-b-duration-40) * 1ms) ease}
.sl-btn[disabled]:not([data-loading]){background:var(--mds-s-color-neutral-surface-inverse-light);color:var(--mds-s-color-neutral-contents-inverse-sub)}


/* ── 다운로드 전 사진 점검 아코디언(다운로드 화면 안, [고해상도 다운로드] 바로 위) ─────────
   MDS Accordion(basic, chevron right)의 c/accordion/* 토큰을 그대로 쓴다. 바깥 간격은 다운로드 화면이 정한다 */
.sl-dl{
  box-sizing:border-box;margin:0;
  background:var(--mds-c-accordion-color-background-default);
  border-radius:calc(var(--mds-c-accordion-radius) * 1px);
  color:var(--mds-c-accordion-color-contents-listname);
  font:var(--mds-c-accordion-typography-listname);
}
.sl-dl[hidden]{display:none}
/* 다운로드 화면의 간격 규칙(정보 상자 위 20 · [고해상도 다운로드] 위 37)을 이어받는다. 아코디언이 끼면 그 사이 간격은 아코디언이 쓴다 */
.dl-pop .tb-pop-body > .sl-dl{margin-top:calc(var(--mds-b-spacing-40) * 1px)} /* 정보 상자와 가깝게: 헤더 안쪽 여백(40 높이의 글자 위 10)이 더해져 보이는 간격은 18 */
.dl-pop .tb-pop-body > .sl-dl:not([hidden]) + .dl-cta{margin-top:calc(var(--mds-c-accordion-spacing-itemgap-menuoption) * 1px);transition:margin-top calc(var(--mds-b-duration-40) * 1ms) ease}
.dl-pop .tb-pop-body > .sl-dl[data-open="1"] + .dl-cta{margin-top:0} /* 펼치면 아코디언의 아래 여백(16)이 간격 역할을 한다 */
.sl-dl-head{
  display:flex;align-items:center;justify-content:space-between;gap:calc(var(--mds-c-accordion-spacing-itemgap-arrow) * 1px);
  width:100%;box-sizing:border-box;height:40px;padding:0; /* mds-new-spec: 다운로드 화면의 입력칸(40)과 높이를 맞춘다. MDS 아코디언 기본 56은 목록 화면용이라 이 자리에는 너무 높다 */
  
  border:none;background:none;cursor:pointer;font:inherit;color:inherit;text-align:left;
}
.sl-dl-chev{display:grid;flex:none;transition:transform calc(var(--mds-b-duration-40) * 1ms) ease}
.sl-dl-chev svg{width:calc(var(--mds-c-accordion-size-arrow) * 1px);height:calc(var(--mds-c-accordion-size-arrow) * 1px)}
.sl-dl[data-open="1"] .sl-dl-chev{transform:rotate(180deg)}
/* 펼침·접힘은 높이가 부드럽게 변한다(다운로드 화면이 갑자기 늘었다 줄지 않게). 접힌 동안 안의 버튼은 초점을 받지 않는다 */
.sl-dl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows calc(var(--mds-b-duration-40) * 1ms) ease}
.sl-dl[data-open="1"] .sl-dl-body{grid-template-rows:1fr}
.sl-dl-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:calc(var(--mds-c-accordion-spacing-itemgap-menuoption) * 1px);visibility:hidden;transition:visibility 0s calc(var(--mds-b-duration-40) * 1ms)}
.sl-dl[data-open="1"] .sl-dl-inner{visibility:visible;transition:none}
/* 접힌 높이가 줄어드는 동안 안의 버튼·목록이 같이 찌그러지지 않게 한다(버튼 위아래 여백이 사라졌다 생기던 문제) */
.sl-dl-inner > *{flex:none}
.sl-dl-inner > :last-child{margin-bottom:calc(var(--mds-b-spacing-70) * 1px)} /* MDS 아코디언 paddingBottom=true: 펼친 영역 아래 b/spacing/70(16) */
.sl-dl-scroll{display:flex;flex-direction:column;gap:calc(var(--mds-c-accordion-spacing-itemgap-menuoption) * 1px);max-height:var(--dl-list-max,240px);overflow:auto} /* mds-new-spec: 사진 목록만 스크롤한다. 최대 240, 화면이 낮으면 slot-overlay.js 가 값을 줄인다 */
/* MDS ScrollView(thin): 막대 4, 바탕과 테두리는 투명이라 양옆 선이 없다. scrollbar-width 를 같이 주면 Chrome 이 굵은 막대를 쓰므로 ::-webkit-scrollbar 만 쓴다 */
.sl-dl-scroll::-webkit-scrollbar{width:calc(var(--mds-c-scrollview-size-thumb-thin) * 1px)}
.sl-dl-scroll::-webkit-scrollbar-track{background:var(--mds-c-scrollview-color-background-scrollarea);border:0}
.sl-dl-scroll::-webkit-scrollbar-thumb{background:var(--mds-c-scrollview-color-background-thumb);border-radius:calc(var(--mds-b-radius-pill) * 1px)}
.sl-dl-all{border:none;background:none;cursor:pointer;padding:0;font:inherit;font-size:calc(var(--mds-b-fontsize-12) * 1px);color:var(--mds-s-color-brand-primary-accessible);font-weight:var(--mds-b-fontweight-medium)}
.sl-dl-all[disabled]{cursor:default;color:var(--mds-s-color-neutral-contents-disabled)}
.sl-dl-fix{
  display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--mds-c-commonbutton-size-height-m) * 1px);box-sizing:border-box;
  padding:0 calc(var(--mds-b-spacing-70) * 1px);cursor:pointer;
  border:calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-default);border-radius:calc(var(--mds-c-commonbutton-radius-square-m) * 1px);
  background:transparent;color:var(--mds-s-color-neutral-contents-default);font:var(--mds-c-commonbutton-typography-m);
}
.sl-dl-fix[disabled]{cursor:default;color:var(--mds-s-color-neutral-contents-disabled)}
/* [N장 모두 화질 개선]의 호버 · 누름 · 키보드 초점(2026-10-15 지시). 에디터 MDS 버튼 실측에는 호버가 없어(editor.html 주석) 호버 색은 에디터의 닫기 버튼 호버와 같은 값을 쓰고, 누르는 동안은 MDS 아웃라인 버튼의 눌림 표시(뉴트럴 15%)를 쓴다 */
.sl-dl-fix{transition:background-color calc(var(--mds-b-duration-40) * 1ms) ease}
.sl-dl-fix:not([disabled]):hover{background:var(--mds-s-color-neutral-background-sunken)}
.sl-dl-fix:not([disabled]):active{background:var(--mds-s-color-neutral-surface-light)}
.sl-dl-fix:focus-visible{outline:calc(var(--mds-b-borderwidth-20) * 1px) solid var(--mds-s-color-brand-primary-light);outline-offset:calc(var(--mds-b-spacing-10) * 1px)}
.sl-dl-all:not([disabled]):hover{text-decoration:underline}
.sl-dl-done{display:flex;flex-direction:column;gap:calc(var(--mds-b-spacing-30) * 1px)}
.sl-dl-donebar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--mds-b-spacing-40) * 1px)}
.sl-dl-donetx{display:flex;align-items:center;gap:calc(var(--mds-b-spacing-20) * 1px);margin:0;font-weight:var(--mds-b-fontweight-semibold)}
.sl-dl-donechk{display:grid;place-items:center;flex:none;width:calc(var(--mds-c-badge-size-container-onlyicon-xs) * 1px);height:calc(var(--mds-c-badge-size-container-onlyicon-xs) * 1px);border-radius:calc(var(--mds-c-badge-radius-round) * 1px);background:var(--mds-s-color-brand-primary-default);color:var(--mds-s-color-neutral-contents-inverse-default)} /* MDS Badge onlyIcon XS(20) */
.sl-dl-tip{margin:0;font-size:calc(var(--mds-b-fontsize-12) * 1px);line-height:calc(var(--mds-b-lineheight-rem-12) * 1px);color:var(--mds-s-color-neutral-contents-additional)}
.sl-dl-pg{display:flex;flex-direction:column;gap:calc(var(--mds-b-spacing-30) * 1px)}
.sl-dl-pgname{margin:0;font-size:calc(var(--mds-b-fontsize-12) * 1px);line-height:calc(var(--mds-b-lineheight-rem-12) * 1px);color:var(--mds-s-color-neutral-contents-additional)}
.sl-dl-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:calc(var(--mds-b-spacing-30) * 1px)}
.sl-dl-th{position:relative;display:block;margin:0}
.sl-dl-thumb{display:block;width:56px;height:56px;border-radius:calc(var(--mds-b-radius-30) * 1px);background:var(--sl-img) center/cover no-repeat} /* mds-new-spec: 점검 목록 썸네일 크기 */
.sl-dl-th[data-fixed="1"] .sl-dl-thumb{opacity:var(--mds-b-opacity-50)}
.sl-dl-donechk svg,.sl-dl-chk svg{width:calc(var(--mds-c-badge-size-icon-onlyicon-xs) * 1px);height:calc(var(--mds-c-badge-size-icon-onlyicon-xs) * 1px)} /* MDS Badge XS 아이콘 */
.sl-dl-chk{position:absolute;right:calc(var(--mds-b-spacing-20) * 1px);bottom:calc(var(--mds-b-spacing-20) * 1px);display:grid;place-items:center;width:calc(var(--mds-c-badge-size-container-onlyicon-xs) * 1px);height:calc(var(--mds-c-badge-size-container-onlyicon-xs) * 1px);border-radius:calc(var(--mds-c-badge-radius-round) * 1px);background:var(--mds-s-color-brand-primary-default);color:var(--mds-s-color-neutral-contents-inverse-default)} /* MDS Badge onlyIcon XS(20) */

/* 접근성: 화면 읽기 전용 글자 */
.sl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* mds-new-spec: 화면 읽기 전용 숨김 */

@media (prefers-reduced-motion: reduce){
  .sl-shimmer,.sl-skel-ai{animation:none}
  .sl-pane[data-k="up-before"]::before,.sl-pane[data-k="up-after"]::before{animation-duration:.01s;animation-delay:0s}
  .sl-ox-fill,.sl-ox-frame,.sl-ox .is-fx{animation:none}
  .sl-ox .is-fx{opacity:1}
  .sl-dl-body,.sl-dl-inner{transition:none}
  .sl-prog-bar{transition:none}
  .sl-root{transition:none}
}

/* 검토용: 슬라이드 배경색을 바꿔 보는 값(단색 배경 사진이 뒤 색과 다른지 확인할 때 쓴다) */
#pagesHost .slide[data-sl-bg="blue"]{background:var(--mds-b-color-function-blue-20)}
#pagesHost .slide[data-sl-bg="dark"]{background:var(--mds-s-color-neutral-background-defaultinverse)}

/* ── 시안 확인 상자(검토용, 실제 UI 아님) ─────────────────
   한도·사진 조건·3초 규칙과 관계없이 누른 그대로의 모양과 동작을 보여 준다.
   제품 UI와 구분되게 머리글에 '검토용' 표시를 둔다. 머리글을 끌어서 옮길 수 있다.
   위쪽에는 고르면 계속 남는 조건(고객 · 원본), 아래쪽에는 누르면 바로 보이는 모양을 두고, 항목 이름은 각 줄의 위쪽에 맞춘다.
   펼치면 좌패널 아래쪽에 두어 슬라이드와 구좌 자리를 가리지 않는다. 처음에는 접혀 있다. */
.sl-pv{
  position:fixed;z-index:100;left:var(--pv-l,var(--sl-pl,84px));width:360px;max-width:calc(100vw - 24px); /* mds-new-spec: 검토 상자 폭 */
  box-sizing:border-box;display:flex;flex-direction:column;max-height:calc(100vh - 24px);overflow:hidden;
  border-radius:calc(var(--mds-b-radius-65) * 1px);
  border:calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
  background:var(--mds-s-color-neutral-background-default);box-shadow:var(--mds-s-shadow-popover);color:var(--mds-s-color-neutral-contents-default);
  font-size:calc(var(--mds-b-fontsize-12) * 1px);line-height:calc(var(--mds-b-lineheight-rem-12) * 1px);
}
.sl-pv[data-dock="bottom"]{bottom:var(--pv-b,14px)}
.sl-pv[data-dock="right"]{left:auto;right:var(--pv-r,14px);top:var(--pv-t,72px)}
.sl-pv[data-dock="free"]{top:var(--pv-t,72px)}
.sl-pv[data-min="1"]{width:auto}
/* 접힌 상자는 좌패널을 덮지 않게 작업 영역 왼쪽 아래(페이지 목록 바로 위)에 둔다. 펼치면 다시 좌패널 아래쪽으로 간다 */
.sl-pv[data-min="1"][data-dock="bottom"]{left:var(--sl-left,88px);bottom:var(--pv-mb,164px)}
.sl-pv-head{display:flex;align-items:center;gap:calc(var(--mds-b-spacing-30) * 1px);padding:calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-70) * 1px);cursor:grab;touch-action:none;user-select:none}
.sl-pv-head:active{cursor:grabbing}
.sl-pv-title{flex:1;font-size:calc(var(--mds-b-fontsize-14) * 1px);font-weight:var(--mds-b-fontweight-semibold)}
.sl-pv-tag{padding:0 calc(var(--mds-b-spacing-40) * 1px);border-radius:calc(var(--mds-b-radius-pill) * 1px);background:var(--mds-s-color-brand-primary-background);color:var(--mds-s-color-brand-primary-accessible);font-weight:var(--mds-b-fontweight-medium)}
.sl-pv-min{border:none;background:none;cursor:pointer;width:24px;height:24px;padding:0;display:grid;place-items:center;color:var(--mds-s-color-neutral-contents-additional)} /* mds-new-spec: 접기 누름 영역 */
.sl-pv-min::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)} /* mds-new-spec: 접기 화살표 */
.sl-pv[data-min="1"] .sl-pv-min::before{transform:rotate(-135deg) translate(-2px,-2px)} /* mds-new-spec: 접기 화살표 방향 */
.sl-pv-body{
  overflow:auto;display:flex;flex-direction:column;
  padding:0 calc(var(--mds-b-spacing-70) * 1px) calc(var(--mds-b-spacing-40) * 1px);
  border-top:calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
}
.sl-pv[data-min="1"] .sl-pv-body{display:none}
.sl-pv-note{margin:0;padding:calc(var(--mds-b-spacing-50) * 1px) 0 calc(var(--mds-b-spacing-40) * 1px);color:var(--mds-s-color-neutral-contents-additional);word-break:keep-all}
/* 한 줄 = 항목 이름(위쪽 맞춤) + 버튼들. 줄마다 얇은 구분선을 둬서 항목이 서로 섞여 보이지 않게 한다 */
.sl-pv-row{display:flex;align-items:flex-start;gap:calc(var(--mds-b-spacing-60) * 1px);padding:calc(var(--mds-b-spacing-20) * 1px) 0;border-top:calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light)}
.sl-pv-note + .sl-pv-row{border-top:none}
.sl-pv-row.is-gap{margin-top:calc(var(--mds-b-spacing-40) * 1px);border-top-color:var(--mds-s-color-neutral-border-default)}
.sl-pv-lab{flex:none;width:60px;padding-top:calc(var(--mds-b-spacing-30) * 1px);color:var(--mds-s-color-neutral-contents-sub);font-weight:var(--mds-b-fontweight-medium)} /* mds-new-spec: 항목 이름 폭 */
.sl-pv-set{display:flex;flex-wrap:wrap;gap:calc(var(--mds-b-spacing-20) * 1px);flex:1;min-width:0}
.sl-pv-b{
  min-height:28px;padding:0 calc(var(--mds-b-spacing-40) * 1px);cursor:pointer; /* mds-new-spec: 검토 버튼 높이 */
  border:none;border-radius:calc(var(--mds-b-radius-pill) * 1px);
  background:var(--mds-s-color-neutral-background-sunken);color:var(--mds-s-color-neutral-contents-default);font:inherit;
}
.sl-pv-b:not(.is-on):not([disabled]):hover{background:var(--mds-s-color-neutral-border-light)}
.sl-pv-b.is-on{background:var(--mds-s-color-neutral-background-defaultinverse);color:var(--mds-s-color-neutral-contents-inverse-default)}
.sl-pv-b[disabled]{cursor:default;color:var(--mds-s-color-neutral-contents-disabled)}
.sl-pv-b--ghost{background:none;color:var(--mds-s-color-neutral-contents-additional)}
.sl-pv-b--ghost:not(.is-on):not([disabled]):hover{background:var(--mds-s-color-neutral-background-sunken)}
.sl-pv-b[hidden],.sl-pv-cur[hidden]{display:none}
.sl-pv-cur{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--mds-b-spacing-30) * 1px);margin-top:calc(var(--mds-b-spacing-30) * 1px);padding:calc(var(--mds-b-spacing-30) * 1px) calc(var(--mds-b-spacing-40) * 1px);border-radius:calc(var(--mds-b-radius-40) * 1px);background:var(--mds-s-color-neutral-background-sunken)}
.sl-pv-cur-t{flex:1;min-width:0;font-weight:var(--mds-b-fontweight-medium)}
.sl-pv-foot{display:flex;justify-content:flex-end;margin-top:calc(var(--mds-b-spacing-20) * 1px);padding-top:calc(var(--mds-b-spacing-30) * 1px);border-top:calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light)}
.sl-pv-b:focus-visible,.sl-pv-min:focus-visible{outline:calc(var(--mds-b-borderwidth-20) * 1px) solid var(--mds-s-color-brand-primary-accessible);outline-offset:calc(var(--mds-b-spacing-10) * 1px)}

/* 번짐(.is-fx-halo)은 색이 도는 상자를 통째로 회전시킨다. 이미지 분해 카드에서는 사진 크기의 150%짜리 직사각형이라
   가로로 긴 사진에서는 회전할 때 양옆이 비어 색이 안 닿는 자리가 생긴다. 구좌 카드에서는 어느 비율이든 덮이도록
   긴 변의 2배짜리 정사각형을 가운데에 두고 돌린다 */
.sl-fxphoto,.sl-pane,.sl-ox-frame{container-type:size}
/* 테두리 띠·번짐의 색 판 크기(--fx-d)는 이미지 분해 카드의 사진 비율 변수(--r)로 계산하는데, 구좌 카드에는 --r 이 없어 판이 0×0 이 되어
   테두리 빛이 사라졌다(26.10.14). 구좌 썸네일은 크기 컨테이너라 가로+세로로 직접 구한다(이미지 분해 카드 식과 같은 값) */
.sl-root .is-fx{--fx-d:calc(100cqw + 100cqh + 48px)} /* mds-new-spec: 색 판 크기(상자 대각선을 덮는 값) */
.sl-root .is-fx-halo{
  left:50%;top:50%;translate:-50% -50%;
  width:max(200cqw,200cqh);height:max(200cqw,200cqh);
}

/* ── 처리 중 사진 위 표시(실서버와 같은 모양): 어두운 막 + 돌아가는 표시 + [취소] ───────── */
.sl-busy{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--mds-b-spacing-30) * 1px);
  background:color-mix(in srgb, var(--mds-s-color-neutral-background-defaultinverse) 45%, transparent); /* mds-new-spec: 처리 중 어두운 막 농도 */
  color:var(--mds-s-color-neutral-contents-inverse-default);
}
.sl-busy-spin{
  width:32px;height:32px;border-radius:50%; /* mds-new-spec: 처리 중 표시 크기 */
  border:2px solid color-mix(in srgb, var(--mds-s-color-neutral-contents-inverse-default) 30%, transparent); /* mds-new-spec: 처리 중 표시 바탕 고리 */
  border-top-color:var(--mds-s-color-neutral-contents-inverse-default);
  animation:slSpin .9s linear infinite; /* mds-new-spec: 처리 중 표시 속도 */
}
.sl-busy-cancel{border:none;background:none;cursor:pointer;color:inherit;font:inherit;font-size:calc(var(--mds-b-fontsize-12) * 1px);padding:calc(var(--mds-b-spacing-20) * 1px) calc(var(--mds-b-spacing-40) * 1px)}
/* 사진 툴바의 해당 버튼은 처리 중 회색으로 돌아간다 */
body[data-sl-busy] .float-tb .ftb-lab{pointer-events:none;color:var(--mds-s-color-neutral-contents-disabled);background:var(--mds-s-color-neutral-background-sunken)}
body[data-sl-busy] .float-tb .ftb-lab .ftb-lab-ico{visibility:hidden}
body[data-sl-busy] .float-tb .ftb-lab{position:relative}
body[data-sl-busy] .float-tb .ftb-lab::before{
  content:"";position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%; /* mds-new-spec: 툴바 버튼 처리 중 표시 */
  border:2px solid currentColor;border-top-color:transparent;animation:slSpin .8s linear infinite; /* mds-new-spec: 툴바 버튼 처리 중 표시 두께·속도 */
}

/* 사진 편집 목록(툴바 드롭다운, 좌패널)의 배경 제거·화질 개선 썸네일도 처리 중에는 누를 수 없다 */
.is-item[aria-disabled="true"]{pointer-events:none;cursor:default}
.is-item[aria-disabled="true"] .is-thumb{opacity:var(--mds-b-opacity-40)}
.is-item[aria-disabled="true"] .is-lab{color:var(--mds-s-color-neutral-contents-disabled)}

/* ── 완료 안내(오른쪽 위) ───────────────────────────────────────────── */
.sl-toast{
  word-break:keep-all;
  position:fixed;z-index:120;top:76px;right:24px;width:400px;box-sizing:border-box; /* mds-new-spec: 안내 문장이 한 줄에 들어가는 폭 */
  display:block;
  padding:calc(var(--mds-b-spacing-70) * 1px) calc(var(--mds-b-spacing-90) * 1px) calc(var(--mds-b-spacing-70) * 1px) calc(var(--mds-b-spacing-70) * 1px);
  border-radius:calc(var(--mds-b-radius-60) * 1px);
  background:var(--mds-s-color-neutral-background-default);box-shadow:var(--mds-s-shadow-popover);
  color:var(--mds-s-color-neutral-contents-default);
  font-size:calc(var(--mds-b-fontsize-14) * 1px);line-height:calc(var(--mds-b-lineheight-rem-14) * 1px);
}
.sl-toast[hidden]{display:none}
.sl-toast{transition:opacity calc(var(--mds-b-duration-40) * 1ms) ease}
.sl-toast.is-leaving{opacity:0}
.sl-toast-ico{flex:none;color:var(--mds-s-color-neutral-contents-additional)}
.sl-toast-head{display:flex;align-items:center;gap:calc(var(--mds-b-spacing-30) * 1px)}
.sl-toast-head strong{font-weight:var(--mds-b-fontweight-semibold)}
.sl-toast-body{margin:calc(var(--mds-b-spacing-20) * 1px) 0 0;word-break:keep-all}
.sl-toast-x{position:absolute;top:calc(var(--mds-b-spacing-40) * 1px);right:calc(var(--mds-b-spacing-40) * 1px);border:none;background:none;cursor:pointer;width:24px;height:24px;padding:0;font-size:20px;color:var(--mds-s-color-neutral-contents-additional)} /* mds-new-spec: 닫기 표시 크기 */
.sl-toast-act{align-self:flex-start;border:none;background:none;cursor:pointer;padding:0;font:inherit;font-weight:var(--mds-b-fontweight-medium);color:var(--mds-s-color-brand-primary-accessible)}

/* 완료 안내를 오른쪽 아래(구좌 카드 자리)에 둘 때: 구좌 카드와 같은 어두운 카드 */
.sl-toast[data-pos="bottom"]{
  top:auto;right:var(--sl-right,16px);bottom:var(--sl-bot,164px);width:400px;
  background:var(--mds-s-color-neutral-background-defaultinverse);color:var(--mds-s-color-neutral-contents-inverse-default);
}
.sl-toast[data-pos="bottom"] .sl-toast-ico,.sl-toast[data-pos="bottom"] .sl-toast-x{color:var(--mds-s-color-neutral-contents-inverse-sub)}
.sl-toast .sl-toast-ico.is-success,.sl-toast[data-pos="bottom"] .sl-toast-ico.is-success{color:var(--mds-s-color-semantic-positive-default)}   /* 완료 안내의 성공 아이콘 */
.sl-toast .sl-toast-ico.is-error,.sl-toast[data-pos="bottom"] .sl-toast-ico.is-error{color:var(--mds-s-color-semantic-negative-default)}   /* 적용 실패 안내의 오류 아이콘 */
.sl-toast[data-pos="bottom"] .sl-toast-act{color:var(--mds-s-color-brand-primary-light)}
/* 오른쪽 아래 완료 안내는 가져오기 완료처럼 한 줄 스낵바: 아이콘, 제목, 버튼, 닫기를 한 줄에 둔다 */
.sl-toast[data-pos="bottom"]{display:flex;align-items:center;gap:calc(var(--mds-b-spacing-60) * 1px);width:auto;max-width:440px;padding:calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-70) * 1px)} /* mds-new-spec: 한 줄 스낵바 최대 폭 */
.sl-toast[data-pos="bottom"] .sl-toast-head{flex:1;min-width:0;white-space:nowrap}
.sl-toast[data-pos="bottom"] .sl-toast-acts{margin:0;flex:none}
.sl-toast[data-pos="bottom"] .sl-toast-act{white-space:nowrap}
.sl-toast[data-pos="bottom"] .sl-toast-x{position:static;flex:none}
.sl-toast[data-pos="bottom"]:not(:has(.sl-toast-x)){padding-right:calc(var(--mds-b-spacing-70) * 1px)}   /* X가 없는 완료 안내는 오른쪽 여백을 왼쪽과 같게 둔다 */


/* 처음 열릴 때 '전'은 가만히 있고, '후' 결과가 도착해 다시 그릴 때 둘이 함께 확대된다 */
.sl-pane[data-still="1"]::before{animation:none;transform:none}
/* 미리 만든 결과를 못 만들었을 때 '후' 자리 */
.sl-failpane{display:grid;place-content:center;justify-items:center;gap:calc(var(--mds-b-spacing-30) * 1px);background-image:none;color:var(--mds-s-color-neutral-contents-inverse-sub);font-size:calc(var(--mds-b-fontsize-12) * 1px);line-height:calc(var(--mds-b-lineheight-rem-12) * 1px)}
.sl-retry{
  border:none;cursor:pointer;margin-top:calc(var(--mds-b-spacing-20) * 1px);
  padding:0 calc(var(--mds-b-spacing-50) * 1px);min-height:28px; /* mds-new-spec: 다시 만들기 작은 버튼 높이 */
  border-radius:calc(var(--mds-b-radius-60) * 1px);
  background:var(--mds-s-color-neutral-surface-inverse-light);color:var(--mds-s-color-neutral-contents-inverse-default);
  font:inherit;font-size:calc(var(--mds-b-fontsize-12) * 1px);font-weight:var(--mds-b-fontweight-semibold);
}
.sl-toast-acts{display:flex;flex-wrap:wrap;gap:calc(var(--mds-b-spacing-60) * 1px);margin-top:calc(var(--mds-b-spacing-30) * 1px)}

/* 생성이 끝나 결과가 나올 때: 생성 중에 덮어 두었던 흐림과 어둠이 걷히며 결과가 또렷해진다 */
.sl-reveal{
  position:absolute;inset:0;pointer-events:none;
  background:color-mix(in srgb, var(--mds-s-color-neutral-background-defaultinverse) 40%, transparent); /* 생성 중 막과 같은 농도에서 시작 */
  backdrop-filter:blur(10px); /* 생성 중 막과 같은 흐림에서 시작 */
  animation:slReveal .9s cubic-bezier(.3,0,.2,1) both; /* mds-new-spec: 흐림이 걷히는 시간 */
}
@keyframes slReveal{from{opacity:1;backdrop-filter:blur(10px)}to{opacity:0;backdrop-filter:blur(0)}}
@media (prefers-reduced-motion: reduce){.sl-reveal{animation:none;opacity:0}}

/* 다운로드 점검: 처리 중인 사진 썸네일 위의 어두운 막과 돌아가는 표시(사진 위 로딩과 같은 모양) */
.sl-dl-th{position:relative}
.sl-dl-busy{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:calc(var(--mds-b-radius-30) * 1px);
  background:color-mix(in srgb, var(--mds-s-color-neutral-background-defaultinverse) 45%, transparent); /* mds-new-spec: 처리 중 어두운 막 농도 */
}
.sl-dl-busy .sl-busy-spin{width:calc(var(--mds-c-spinner-size-s) * 1px);height:calc(var(--mds-c-spinner-size-s) * 1px);border-width:calc(var(--mds-c-spinner-borderwidth-s) * 1px)} /* MDS Spinner S(20, 두께 3) */

/* 버튼·처리 중·완료가 같은 자리를 쓴다: 어느 상태든 높이가 같아서 다운로드 화면이 들쑥날쑥하지 않는다 */
.sl-dl-act{min-height:46px; /* mds-new-spec: 버튼(40)·처리 중·완료·일부 실패(두 줄 20+20+6)가 같은 높이를 쓴다. 이보다 크면 헤더와 버튼 사이에 빈 틈이 생긴다 */
  display:flex;flex-direction:column;justify-content:center;gap:calc(var(--mds-b-spacing-30) * 1px)}
.sl-dl-work{display:flex;align-items:center;gap:calc(var(--mds-b-spacing-60) * 1px)}
.sl-dl-workmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(var(--mds-b-spacing-30) * 1px)}
.sl-dl-failtx{font-weight:var(--mds-b-fontweight-medium)}
/* 밝은 다운로드 화면 위에서도 진행 막대의 바탕이 보이게 한다 */
.sl-dl-workmain .sl-prog{background:var(--mds-s-color-neutral-background-sunken)}
.sl-dl-lead{display:flex;align-items:center;gap:calc(var(--mds-b-spacing-20) * 1px);min-width:0} /* 아이콘과 글자 사이 4 */
.sl-dl-ai{flex:none;width:16px;height:16px} /* mds-new-spec: 아코디언 왼쪽 'ai' 표시 크기(작게) */
/* 사진을 찾는 동안에는 왼쪽 아이콘 자리에 돌아가는 표시를 둔다(2026-10-15 지시). 찾은 뒤에는 'ai' 표시로 바뀌어 로딩과 완료가 구분된다 */
.sl-dl-failico{display:inline-grid;place-items:center;width:calc(var(--mds-c-badge-size-container-text-2xs) * 1px);height:calc(var(--mds-c-badge-size-container-text-2xs) * 1px);border-radius:calc(var(--mds-c-badge-radius-round) * 1px);background:var(--mds-s-color-semantic-negative-default);color:var(--mds-s-color-neutral-contents-inverse-default);font-size:calc(var(--mds-b-fontsize-10) * 1px);font-weight:var(--mds-b-fontweight-semibold)} /* MDS Badge text 2XS(16) */
.sl-dl-spin{flex:none;width:calc(var(--mds-c-spinner-size-xs) * 1px);height:calc(var(--mds-c-spinner-size-xs) * 1px);box-sizing:border-box;border-radius:50%; /* MDS Spinner XS(16) */
  border:calc(var(--mds-c-spinner-borderwidth-xs) * 1px) solid color-mix(in srgb, var(--mds-s-color-brand-primary-default) 25%, transparent); /* mds-new-spec: 처리 중 표시 바탕 고리 */
  border-top-color:var(--mds-s-color-brand-primary-default);animation:slSpin .8s linear infinite} /* mds-new-spec: 진행 표시 속도 */
@media (prefers-reduced-motion: reduce){.sl-dl-spin{animation-duration:2.4s}}

/* ── 우하단 공존 확인용 가짜 요소(검토용) ───────────────────── */
.sl-mock{position:fixed;right:var(--sl-right,16px);z-index:86;box-sizing:border-box;color:var(--mds-s-color-neutral-contents-default)}
.sl-mock p{margin:0}
.sl-mock-t{font-weight:var(--mds-b-fontweight-semibold)}
.sl-mock-s{font-size:calc(var(--mds-b-fontsize-12) * 1px)}
.sl-pv-co{padding:0 calc(var(--mds-b-spacing-40) * 1px);color:var(--mds-s-color-neutral-contents-additional);font-size:calc(var(--mds-b-fontsize-12) * 1px)}

.sl-mock-bgm{width:204px;height:48px;padding:0 calc(var(--mds-b-spacing-60) * 1px) 0 calc(var(--mds-b-spacing-30) * 1px);border-radius:calc(var(--mds-c-badge-radius-round) * 1px);background:var(--mds-s-color-neutral-background-default);border:calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-default);box-shadow:var(--mds-s-shadow-popover);display:flex;align-items:center;gap:calc(var(--mds-b-spacing-40) * 1px)} /* mds-new-spec: BGM 위젯 크기(실제 화면 캡처 실측 약 204x48) */
.sl-bgm-art{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--mds-s-color-neutral-surface-inverse-light);color:var(--mds-s-color-neutral-contents-sub)} /* mds-new-spec: BGM 썸네일 크기 */
.sl-bgm-tx{min-width:0;display:flex;flex-direction:column}
.sl-bgm-nm{font-size:calc(var(--mds-b-fontsize-14) * 1px);font-weight:var(--mds-b-fontweight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-bgm-tm{font-size:calc(var(--mds-b-fontsize-12) * 1px);color:var(--mds-s-color-neutral-contents-sub)}
.sl-mock-nudge{width:280px;padding:calc(var(--mds-b-spacing-70) * 1px);border-radius:calc(var(--mds-b-radius-60) * 1px);background:var(--mds-s-color-neutral-background-default);box-shadow:var(--mds-s-shadow-popover)} /* mds-new-spec: 가짜 팝업 폭 */
.sl-mock-nudge[hidden]{display:none}
/* 기존 Pro 기능 넛지 팝업(두 그룹 모두 뜸): 어두운 카드에 사진 썸네일과 버튼. 실제 팝업을 옮긴 모양이 아니라 데모용이다 */
.sl-mock-pro{
  width:310px;padding:0 calc(var(--mds-b-spacing-70) * 1px) calc(var(--mds-b-spacing-70) * 1px); /* mds-new-spec: 구좌 카드와 같은 폭 */
  border-radius:calc(var(--mds-b-radius-60) * 1px);background:var(--mds-s-color-neutral-background-defaultinverse);box-shadow:var(--mds-s-shadow-popover);
  color:var(--mds-s-color-neutral-contents-inverse-default);display:flex;flex-direction:column;gap:calc(var(--mds-b-spacing-40) * 1px);
}
.sl-pro-head{display:flex;align-items:center;gap:calc(var(--mds-b-spacing-40) * 1px);height:52px} /* mds-new-spec: 구좌 카드와 같은 머리 높이 */
.sl-pro-t{flex:1;min-width:0;font-weight:var(--mds-b-fontweight-semibold);font-size:calc(var(--mds-b-fontsize-14) * 1px)}
.sl-pro-x{flex:none;border:none;background:none;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;padding:0;color:var(--mds-s-color-neutral-contents-inverse-sub);border-radius:calc(var(--mds-b-radius-30) * 1px)} /* mds-new-spec: 닫기 누르는 영역 */
.sl-pro-img{height:140px;border-radius:calc(var(--mds-b-radius-30) * 1px);background:var(--sl-img) center/cover no-repeat} /* mds-new-spec: 사진 썸네일 높이 */
.sl-pro-s{margin:0;font-size:calc(var(--mds-b-fontsize-12) * 1px);color:var(--mds-s-color-neutral-contents-inverse-sub)}
.sl-pro-cta{
  border:none;cursor:pointer;height:calc(var(--mds-c-commonbutton-size-height-m) * 1px);border-radius:calc(var(--mds-c-commonbutton-radius-square-m) * 1px);
  background:var(--mds-s-color-brand-primary-default);color:var(--mds-s-color-neutral-contents-inverse-default);font:var(--mds-c-commonbutton-typography-m);
}
/* 썸네일 한 장 고치기: 누를 수 있는 썸네일은 마우스를 올리면 테두리가 생긴다 */
.sl-dl-thbtn{position:relative;display:block;padding:0;border:none;background:none;cursor:pointer;border-radius:calc(var(--mds-b-radius-30) * 1px)}
.sl-dl-thbtn:focus-visible{outline:calc(var(--mds-b-borderwidth-20) * 1px) solid var(--mds-s-color-brand-primary-light);outline-offset:calc(var(--mds-b-spacing-10) * 1px)}
/* 썸네일에 마우스를 올리면(키보드 초점도 같이) 딤드로 덮이고 가운데에 화질 개선 아이콘(MDS icon_upscale, 체크는 체크박스처럼 보여 쓰지 않는다)이 보인다. 글자는 쓰지 않는다(언어마다 길이가 달라 56픽셀 썸네일에 안 들어갈 수 있음). 누르면 그 사진 한 장만 고친다(2026-10-15 지시) */
.sl-dl-hov{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;border-radius:inherit;pointer-events:none; /* 딤드가 완료 · 사라짐 표시보다 앞에 온다 */
  background:var(--mds-c-dimmed-color-background-black-medium);color:var(--mds-s-color-neutral-contents-inverse-default);
  opacity:0;transition:opacity calc(var(--mds-b-duration-40) * 1ms) ease;
}
.sl-dl-hov svg{display:block}
.sl-dl-thbtn:hover .sl-dl-hov,.sl-dl-thbtn:focus-visible .sl-dl-hov{opacity:1}
/* 고치는 동안 캔버스에서 사라지거나 바뀐 사진(2026-10-15 지시): 노란색 ? 배지, 흐리게, 누를 수 없다(버튼이 아니라 호버도 없다) */
.sl-dl-thgone{position:absolute;right:calc(var(--mds-b-spacing-20) * 1px);bottom:calc(var(--mds-b-spacing-20) * 1px);display:grid;place-items:center;width:calc(var(--mds-c-badge-size-container-onlyicon-xs) * 1px);height:calc(var(--mds-c-badge-size-container-onlyicon-xs) * 1px);border-radius:calc(var(--mds-c-badge-radius-round) * 1px);background:var(--mds-s-color-semantic-warning-default);color:var(--mds-s-color-neutral-contents-default);font-size:calc(var(--mds-b-fontsize-12) * 1px);font-weight:var(--mds-b-fontweight-semibold);pointer-events:none} /* mds-new-spec: 썸네일 사라짐 표시(완료 · 실패 표시와 같은 크기) */
.sl-dl-th[data-gone="1"] .sl-dl-thumb{opacity:var(--mds-b-opacity-50)}

/* ── 오른쪽 아래 모달 층(상세설계 7-2) ───────────────────────────
   실제 에디터의 오른쪽 아래 모달은 화면 기준 아래에서 68px 자리에 위젯 · 스낵바와 상관없이 그 위층으로 뜬다(2026-10-12 확인).
   구좌 카드, 업로드 직후 카드(#isCard), 안내 모달 · Pro 팝업 · 스마트 블록 넛지 목업이 같은 자리 · 같은 층을 쓴다.
   층 순서: 위젯 86 < 스낵바 92~95(완료 안내 94) < 모달 97 */
#isCard.is-card{bottom:68px;z-index:97} /* mds-new-spec: 이미지 분해의 업로드 직후 카드도 오른쪽 아래 모달 자리(68px)와 층에 놓는다 */
.sl-mock-nudge,.sl-mock-pro,.sl-mock-smartnudge{z-index:97}
.sl-mock-smartnudge{
  width:auto;max-width:340px;padding:calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-70) * 1px); /* mds-new-spec: 스마트 블록 넛지 목업 최대 폭 */
  border-radius:calc(var(--mds-b-radius-40) * 1px);background:var(--mds-s-color-neutral-surface-darkness);color:var(--mds-s-color-neutral-contents-inverse-default);
  box-shadow:var(--mds-s-shadow-popover);font-size:calc(var(--mds-b-fontsize-14) * 1px);line-height:calc(var(--mds-b-lineheight-rem-14) * 1px);
}
/* 나가는 중인 모달(slot-overlay.js outAnim): 눌러지지 않고, 움직임이 끝나면 지워진다 */
.sl-out{pointer-events:none}
/* 적용 중 · 완료 · 실패 안내는 스낵바라서 모달 층 아래에 있다 */
.sl-toast[data-pos="bottom"]{z-index:94}
/* 적용 중 안내(2026-10-12 결정): 돌아가는 표시와 제목만 있고 닫기 · 행동이 없다 */
.sl-toast-spin{
  flex:none;width:20px;height:20px;border-radius:50%; /* mds-new-spec: 스낵바 진행 표시 크기(제목 줄 아이콘과 같은 자리) */
  border:2px solid currentColor;border-top-color:transparent; /* mds-new-spec: 진행 표시 두께 */
  color:var(--mds-s-color-neutral-contents-inverse-sub);animation:slSpin .8s linear infinite; /* mds-new-spec: 진행 표시 속도 */
}
@media (prefers-reduced-motion: reduce){.sl-toast-spin{animation-duration:2.4s}}


/* 내 화면 참조 화면의 툴팁(2026-10-15 지시): 주제 입력 칸 오른쪽에 5초 동안 뜬다. MDS Tooltip(문장형, neutral)과 같은 값이고 화살표는 왼쪽 입력 칸을 가리킨다 */
.sl-tip{
  position:fixed;z-index:92;left:var(--tip-l,0);top:var(--tip-t,0);box-sizing:border-box;max-width:260px;white-space:pre-line; /* mds-new-spec: 툴팁 폭 */
  padding:calc(var(--mds-b-spacing-40) * 1px) calc(var(--mds-b-spacing-60) * 1px);
  border-radius:calc(var(--mds-c-tooltip-radius-default) * 1px);
  background:var(--mds-s-color-neutral-background-defaultinverse);color:var(--mds-s-color-neutral-contents-inverse-default);   /* 참고 이미지의 툴팁과 같은 짙은 색 */
  font:var(--mds-c-tooltipsentence-typography-m-sentencetext);word-break:keep-all;
  box-shadow:var(--mds-s-shadow-popover);
  animation:slTipIn calc(var(--mds-b-duration-40) * 1ms) ease both;
}
.sl-tip::before{
  content:"";position:absolute;top:50%;left:calc(var(--mds-c-tooltip-size-arrow-height-default) * -1px);transform:translateY(-50%);
  border-top:calc(var(--mds-c-tooltip-size-arrow-width-default) * 0.5px) solid transparent;
  border-bottom:calc(var(--mds-c-tooltip-size-arrow-width-default) * 0.5px) solid transparent;
  border-right:calc(var(--mds-c-tooltip-size-arrow-height-default) * 1px) solid var(--mds-s-color-neutral-background-defaultinverse);
}
.sl-tip.is-leaving{opacity:0;transition:opacity calc(var(--mds-b-duration-40) * 1ms) ease}
@keyframes slTipIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.sl-tip{animation:none}}

/* 내 화면 참조 카드의 버튼 글자 '{검색어} 요소 만들기'(2026-10-15 지시): 버튼 너비를 넘으면 검색어 쪽만 말줄임표로 줄이고 앞뒤 글자는 그대로 둔다 */
.sl-btn-lab{display:flex;min-width:0;max-width:100%}
.sl-btn-pre,.sl-btn-suf{flex:none;white-space:pre}
.sl-btn-q{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 다운로드 점검이 사진을 찾는 동안(2026-10-15 지시): 머리글만 보이고 글자 끝의 점이 하나씩 생긴다. 점 자리는 고정해 글자가 흔들리지 않게 한다 */
.sl-dl-head.is-loading,.sl-dl-head.is-fail,.sl-dl-head.is-none{cursor:default}
.sl-dl-retry{display:grid;flex:none;place-items:center;width:24px;height:24px;border:none;background:none;padding:0;cursor:pointer;color:var(--mds-s-color-brand-primary-accessible)}   /* 못 찾음: 다시 찾는 아이콘 버튼 */
.sl-dl-retry{border-radius:calc(var(--mds-b-radius-30) * 1px);transition:background-color calc(var(--mds-b-duration-40) * 1ms) ease}
.sl-dl-retry svg{display:block;width:16px;height:16px} /* mds-new-spec: 왼쪽 'ai' 표시와 같은 크기 */
.sl-dl-retry:hover{background:var(--mds-s-color-neutral-background-sunken)}
.sl-dl-retry:active{background:var(--mds-s-color-neutral-surface-light)}
.sl-dl-retry:focus-visible{outline:calc(var(--mds-b-borderwidth-20) * 1px) solid var(--mds-s-color-brand-primary-light);outline-offset:calc(var(--mds-b-spacing-10) * 1px)}
.sl-dl-head.is-fail .sl-dl-ai{flex:none}
.sl-dots{display:inline-block;width:1.2em;text-align:left;white-space:nowrap}
.sl-dots i{font-style:normal;opacity:0}
.sl-dots i:nth-child(1){animation:slDot1 1.2s step-end infinite}
.sl-dots i:nth-child(2){animation:slDot2 1.2s step-end infinite}
.sl-dots i:nth-child(3){animation:slDot3 1.2s step-end infinite}
@keyframes slDot1{0%{opacity:0}25%{opacity:1}100%{opacity:1}}
@keyframes slDot2{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
@keyframes slDot3{0%{opacity:0}75%{opacity:1}100%{opacity:1}}
@media (prefers-reduced-motion: reduce){.sl-dots i{animation:none;opacity:1}}

/* 유실(?) 썸네일 툴팁(2026-10-15 지시): 작은 어두운 말풍선, 두 줄 */
.sl-dl-gtip{   /* MDS Tooltip 문장형 neutral, size S · compact(작은 툴팁) */
  position:fixed;z-index:2147483000;box-sizing:border-box;max-width:180px; /* mds-new-spec: 툴팁 폭 */
  padding:calc(var(--mds-b-spacing-30) * 1px) calc(var(--mds-b-spacing-40) * 1px);
  border-radius:calc(var(--mds-c-tooltip-radius-compact) * 1px);
  background:var(--mds-c-tooltipsentence-color-background-neutral);color:var(--mds-c-tooltipsentence-color-contents-neutral-sentencetext);
  font:var(--mds-c-tooltipsentence-typography-s-sentencetext);word-break:keep-all;white-space:pre-line;text-align:center;
  box-shadow:var(--mds-s-shadow-popover);pointer-events:none;
}
/* 꼬리: 썸네일 위에 뜨면 아래를, 아래에 뜨면 위를 가리킨다. 가로 위치는 썸네일 가운데(--gtip-ax)에 맞춘다 */
.sl-dl-gtip::before{
  content:"";position:absolute;left:var(--gtip-ax,50%);transform:translateX(-50%);bottom:calc(var(--mds-c-tooltip-size-arrow-height-compact) * -1px);
  border-left:calc(var(--mds-c-tooltip-size-arrow-width-compact) * 0.5px) solid transparent;
  border-right:calc(var(--mds-c-tooltip-size-arrow-width-compact) * 0.5px) solid transparent;
  border-top:calc(var(--mds-c-tooltip-size-arrow-height-compact) * 1px) solid var(--mds-c-tooltipsentence-color-background-neutral);
}
.sl-dl-gtip.is-below::before{
  bottom:auto;top:calc(var(--mds-c-tooltip-size-arrow-height-compact) * -1px);
  border-top:none;border-bottom:calc(var(--mds-c-tooltip-size-arrow-height-compact) * 1px) solid var(--mds-c-tooltipsentence-color-background-neutral);
}