/* ================================================================
   이미지 분해 진입점 오버레이
   설계 정본: ../이미지 분해/이미지분해_진입구좌_최종설계_20260903.md
   규격은 전부 2026-09-07 실서버 실측(CSS 픽셀, 브라우저 안쪽 1366x768 고정).
   에디터 정본(editor.html)은 건드리지 않고 이 파일과 짝 js 로만 얹는다.
   ================================================================ */

/* ── 공통: 전/후 비교 썸네일 ─────────────────────────────────
   2026-09-07 에 실서버에서 실물을 그대로 받아 assets/photoedit/ 에 뒀다.
   이미지 확장·부분 생성은 호버 파일까지 있어 그대로 쓴다(설계의 "정지 1장 +
   호버 gif" 가 실서버에 이미 그렇게 있다). */
.is-thumb{
  display:block;position:relative;overflow:hidden;
  background:var(--mds-s-color-surface-lightness);
  border-radius: calc(var(--mds-b-radius-40) * 1px);
}
/* 실물 썸네일이 있으면 그것만 쓴다. 없을 때만 아래 자리표시가 보인다. */
.is-thumb > .is-img{
  display:block;width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;
}
.is-thumb > .is-img-hover{opacity:0;transition:opacity calc(var(--mds-b-duration-20) * 1ms) ease}
.is-item:hover .is-thumb > .is-img-hover{opacity:1}
.is-thumb:not(.has-img)::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, var(--mds-b-color-function-blue-20) 0%, var(--mds-b-color-function-blue-40) 100%);
  clip-path:polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.is-thumb:not(.has-img)::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg, var(--mds-b-color-function-yellow-30) 0 34%, transparent 34%),
    linear-gradient(180deg, transparent 0 42%, var(--mds-b-color-function-green-30) 42% 72%, transparent 72%),
    linear-gradient(180deg, transparent 0 80%, var(--mds-b-color-function-red-30) 80% 100%);
  clip-path:polygon(54% 0, 100% 0, 100% 100%, 54% 100%);
}
.is-thumb > .is-thumb-mark{
  position:absolute;left:50%;top:0;bottom:0;width: calc(var(--mds-b-borderwidth-10) * 1px);
  background:var(--mds-s-color-neutral-background-default);z-index:1;
}

/* ── 유료 표시: 24x16 검정 알약 + 왕관 12 (좌패널 실측) ────────── */
.is-crown{
  position:absolute;left:6px;top:6px;z-index:2;
  width:24px;height:16px; /* mds-new-spec: 좌패널 왕관 알약 실측값 */
  display:grid;place-items:center;
  border-radius: calc(var(--mds-b-radius-40) * 1px);
  background:var(--mds-s-color-neutral-surface-darkness);
}
.is-crown svg{width:12px;height:12px;display:block}

/* ── 툴바 '사진 편집' 팝오버: 3열 썸네일 그리드 ───────────────
   실측 312x409(9종 3행) · 안쪽 여백 16 · radius 16 · 썸네일 87x87
   · 열 간격 97.5 · 행 간격 130. 10종이면 4행 539 가 된다. */
.is-pop{
  position:fixed;z-index:70;
  width:312px;box-sizing:border-box; /* mds-new-spec: 팝오버 폭 실측값 */
  padding:calc(var(--mds-b-spacing-70) * 1px);
  background:var(--mds-s-color-neutral-background-default);
  border-radius: 16px; /* mds-new-spec: radius 스케일에 없는 실측값 */
  box-shadow:var(--mds-s-shadow-popover);
}
.is-grid{
  display:grid;grid-template-columns:repeat(3, 87px);
  column-gap:calc(var(--mds-b-spacing-50) * 1px);row-gap:calc(var(--mds-b-spacing-60) * 1px); /* 실측 열 97.5·행 130 → 스케일 값 10·12 로 맞춤 */
}
.is-item{
  position:relative;border:none;background:none;padding:0;cursor:pointer;
  display:block;width:87px;text-align:center;
}
.is-item .is-thumb{width:87px;height:87px;border-radius:0} /* mds-new-spec: 툴바 썸네일 실측 87x87 radius 0 */
.is-item .is-lab{
  display:block;margin-top:calc(var(--mds-b-spacing-60) * 1px);line-height: calc(var(--mds-b-lineheight-rem-14) * 1px); /* mds-new-spec: 라벨이 썸네일 아래 12 실측 */
  font-size:calc(var(--mds-b-fontsize-14) * 1px);
  color:var(--mds-s-color-neutral-contents-default);
  /* 2026-09-11: 한 줄 고정이라 '요소와 글자 편집'(8자)이 칸을 넘어 옆 항목 위로 흘렀다.
     줄바꿈을 허용하되 낱말 중간에서는 안 끊기게 한다. */
  white-space:normal;word-break:keep-all;
}
.is-item:hover .is-thumb{outline: calc(var(--mds-b-borderwidth-20) * 1px) solid var(--mds-s-color-brand-primary-default)}
.is-item[data-is-new="1"] .is-lab{font-weight:var(--mds-b-fontweight-semibold);color:var(--mds-s-color-brand-primary-default)}

/* ── 좌패널 'ai 사진 편집' 섹션 ─────────────────────────────
   접힌 기본은 가로 캐러셀, [더보기]를 누르면 3열 그리드.
   실측: 캐러셀 썸네일 88~90 radius 8 · 항목 간격 12 · 라벨 14px 아래 8
        펼침 94x94 · 열 108 · 행 136 · 라벨 아래 9 */
.is-sec{margin:0 0 calc(var(--mds-b-spacing-80) * 1px)}
.is-sec-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:calc(var(--mds-b-spacing-60) * 1px);
}
.is-sec-title{
  display:flex;align-items:center;gap:4px;
  font-size:calc(var(--mds-b-fontsize-14) * 1px);
  font-weight:var(--mds-b-fontweight-semibold);
  color:var(--mds-s-color-neutral-contents-default);
}
.is-sec-more{
  border:none;background:none;cursor:pointer;padding:0;
  font-size:calc(var(--mds-b-fontsize-12) * 1px);
  color:var(--mds-s-color-brand-primary-default);
}
.is-rail{display:flex;gap:calc(var(--mds-b-spacing-60) * 1px);overflow-x:auto;scrollbar-width:none}
.is-rail::-webkit-scrollbar{display:none}
.is-rail .is-item{width:88px;flex:0 0 auto} /* mds-new-spec: 캐러셀 썸네일 실측 88~90 */
.is-rail .is-item .is-thumb{width:88px;height:88px;border-radius: calc(var(--mds-b-radius-40) * 1px)}
.is-rail .is-item .is-lab{margin-top:calc(var(--mds-b-spacing-40) * 1px)} /* mds-new-spec: 라벨이 썸네일 아래 8 실측. 크기는 세 화면 공통 14 */
/* 행 피치 136 = 썸네일 94 + 라벨 여백 8 + 라벨 줄높이 20 + 행 간격 14.
   예전엔 라벨을 빼먹고 136-94=42 로 잡아 실제 피치가 165 였다(2026-09-11 실측 확인). */
.is-open{display:grid;grid-template-columns:repeat(3, 94px);
  column-gap:14px; /* mds-new-spec: 열 피치 108 실측, spacing 스케일에 14 없음 */
  row-gap:14px}    /* mds-new-spec: 위 계산값, spacing 스케일에 14 없음 */
.is-open .is-item{width:94px}
.is-open .is-item .is-thumb{width:94px;height:94px;border-radius: calc(var(--mds-b-radius-40) * 1px)}
.is-open .is-item .is-lab{margin-top:calc(var(--mds-b-spacing-40) * 1px)} /* 실측 9 → 스케일 값 8 로 맞춤 */

/* 횟수 뱃지: 무료 제공 항목을 쓴 뒤부터 붙는다(배경 제거 5/5 실측) */
.is-count{
  position:absolute;right:6px;bottom:6px;z-index:2;
  padding:0 6px;height:16px;display:grid;place-items:center; /* 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);
  font-size:calc(var(--mds-b-fontsize-10) * 1px);
}


/* ── AI 결과 화면: 이미지 아래 버튼셋의 두 번째 버튼 ──────────
   2026-09-08 재설계: MDS 버튼셋(.btn/.btn-lg/.btn-soft)을 그대로 쓴다.
   새 규격 없음 — 왕관 보이기/숨기기만 이 자리에 맞게 잡아준다. */
.is-res-btn-split .is-ftb-crown{width:14px;height:14px;display:none}
.is-res-btn-split[data-locked="1"] .is-ftb-crown{display:inline-block}

/* ── 업로드 직후 AI 편집 카드 ───────────────────────────────
   실측: 310x326 · radius 12 · 우하단 고정 · 헤더 52 · 미디어 310x156
        · 본문 278x40 · 기존 버튼 124x40 · 신규 버튼 자리 최대 146x40 */
.is-card{
  position:fixed;right:16px;bottom:16px;z-index:90;
  width:310px;box-sizing:border-box; /* mds-new-spec: 카드 폭 실측값 */
  border-radius: calc(var(--mds-b-radius-60) * 1px);
  /* 2026-09-10: surface-darkness 는 #23242a**e5**(90%)라 캔버스가 비쳐 흐려 보였다.
     실측값 rgb(35,36,42) 에는 알파가 없으므로 불투명 토큰으로 바꾼다. */
  background:var(--mds-s-color-neutral-background-defaultinverse); /* 09-06 실측 rgb(35,36,42) */
  box-shadow:var(--mds-s-shadow-popover);
  overflow:hidden;
}
.is-card[hidden]{display:none}
.is-card-head{
  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: 카드 헤더 높이 실측값 */
  box-sizing:border-box;
}
.is-card-head .is-card-title{
  flex:1;font-size:calc(var(--mds-b-fontsize-14) * 1px);
  font-weight:var(--mds-b-fontweight-semibold);
  color:var(--mds-s-color-neutral-contents-inverse-default); /* 09-06 실측: 흰 글자 */
}
.is-card-x{
  border:none;background:none;cursor:pointer;padding:0;
  width:24px;height:24px;display:grid;place-items:center;
  color:var(--mds-s-color-neutral-contents-inverse-sub);
}
.is-card-media{
  height:156px; /* mds-new-spec: 카드 미디어 높이 실측값. 카드 폭 310 을 꽉 채운다 */
  /* 2026-09-10 지시: 회색 판을 깔지 않는다 — 카드 배경(검정)이 그대로 보인다.
     사진은 이 자리를 넘지 않는 선에서 비율 그대로 최대로 키운다(가로든 세로든
     한쪽이 끝에 닿으면 거기서 멈춘다). 꽉 채우려고 자르지 않는다. */
  display:flex;align-items:center;justify-content:center;
  background:none;
  overflow:hidden;
}
/* 이미지 상자 자체가 사진 크기가 되게 둔다 — 그래야 모서리 8 이 letterbox 가 아니라
   사진 테두리에 걸린다(width/height 100% + object-fit 이면 상자가 영역 전체가 된다). */
.is-card-media .is-card-img{
  display:block;width:auto;height:auto;max-width:100%;max-height:100%;
  border-radius:calc(var(--mds-b-radius-40) * 1px);
}
.is-card-body{
  padding:calc(var(--mds-b-spacing-60) * 1px) calc(var(--mds-b-spacing-70) * 1px) 0;
  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); /* 09-06 실측: 흰 글자 2줄 */
}
.is-card-foot{display:flex;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-card-foot .is-btn{
  height:40px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  border-radius: calc(var(--mds-b-radius-40) * 1px);
  font-size:calc(var(--mds-b-fontsize-14) * 1px);
  font-weight:var(--mds-b-fontweight-semibold);
  cursor:pointer;border:none;
}
.is-card-foot .is-ftb-crown{width:14px;height:14px;display:none}
.is-card-foot .is-btn[data-locked="1"] .is-ftb-crown{display:inline-block}
/* 2026-09-11: 고스트로 바꿨다가 되돌림 — 어두운 카드 위에서는 면이 있어야 버튼으로 보인다.
   고스트는 결과 완료 화면의 후속 작업 줄에만 쓴다. */
.is-card-foot .is-btn-sub{
  flex:1;max-width:146px; /* mds-new-spec: 신규 버튼 자리 실측 최대 폭 */
  background:var(--mds-s-color-neutral-surface-inverse-light); /* 어두운 카드 위 보조 버튼 */
  color:var(--mds-s-color-neutral-contents-inverse-default);
}
.is-card-foot .is-btn-main{
  width:124px; /* mds-new-spec: 기존 버튼 폭 실측값 */
  background:var(--mds-s-color-brand-primary-default);
  color:var(--mds-s-color-neutral-contents-inverse-default);
}

/* 2026-09-08: 검토용 컨트롤(.is-ctl)을 여기서 걷어냈다. "데모 환경 설정"(px-dev,
   pptx-overlay.js가 그림) 패널의 "이미지 분해" 칸으로 합쳐서 그 패널의 기존
   .px-dev-cat/.tb-label/.px-grp/.pt-pill 스타일을 그대로 쓴다 — 새 규격 없음. */

/* 4행이 화면을 넘으면 안에서 스크롤한다. 실서버가 위로 뒤집는지 스크롤하는지
   확인되면 이 규칙을 그쪽으로 바꾼다(설계 6장 위험 항목). */
.is-pop[data-scroll]{overflow-y:auto}

/* 화면에는 안 보이고 스크린리더만 읽는 글. 왕관이 그림뿐이라 이게 없으면
   유료 전용이라는 정보가 아예 전달되지 않는다. */
.is-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* ── 진행·완료·안내 알림 (설계 0-4 의 우하단 스낵바) ───────────── */
.is-snack{
  position:fixed;right:16px;bottom:16px;z-index:92;
  max-width:340px;box-sizing:border-box; /* mds-new-spec: 스낵바 최대 폭 */
  padding:12px 16px;
  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);
  font-size:calc(var(--mds-b-fontsize-14) * 1px);
  line-height: calc(var(--mds-b-lineheight-rem-14) * 1px);
  box-shadow:var(--mds-s-shadow-popover);
}
.is-snack b{font-weight:var(--mds-b-fontweight-semibold);text-decoration:underline;cursor:pointer}

/* ── 두 줄 완료 스낵바 (MDS Snackbar lined=2) ─────────────────────────────
   좌패널 자동 전환을 뺀 대신 저장 위치와 다음에 쓸 자리를 글로 알린다(설계 4-1,
   09-09 지시). radius 토큰은 c/snackbar/radius/oneLine(10) 하나뿐이라 그대로 쓰고
   정렬만 위로 올린다 — lined=2 전용 radius 값은 MDS 스펙에 아직 없다. */
.px-snack.twoline { align-items: flex-start; }
.px-snack.twoline .px-txt {
  display: flex; flex-direction: column;
  gap: calc(var(--mds-b-spacing-10) * 1px);
}
.px-snack.twoline .px-sact { align-self: flex-start; }
.px-snack .is-snack-sub { color: var(--mds-s-color-neutral-static-white-darkness); }

/* ── AI 결과 화면 칸(2026-09-10, C안) ──────────────────────────────
   옆 세 항목과 같은 .ai-act 를 쓰고, 왕관만 아이콘 우상단에 겹쳐 둔다.
   알약이던 때는 왕관이 글자 앞에 붙었는데 칸 문법에서는 자리가 없다. */
.is-res-btn-split .is-res-ico{position:relative;display:grid;place-items:center}
.is-res-btn-split .is-res-ico .is-ftb-crown{
  position:absolute;right:-2px;top:-2px; /* mds-new-spec: 아이콘 배지 위 왕관 겹침 위치 */
  width:12px;height:12px;display:none;
}
.is-res-btn-split[data-locked="1"] .is-res-ico .is-ftb-crown{display:block}
.is-res-btn-split .is-res-ico .is-ftb-crown svg{width:12px;height:12px;display:block}