/* PPTX 업로드 설계안 오버레이 — MDS 토큰만 사용해서 다크모드가 따라오게 함 */

/* ---------- 공통 ---------- */
.px-hide { display: none !important; }

/* 업로드 탭 필터 칩(전체·폴더·이미지·동영상). 킷 `.chip` 은 선택 상태(.is-on) CSS가
   아예 없어 전부 고스트 버튼처럼 보였다(26.08.28 발견) — 같은 패널에 이미 실측돼 있는
   `.pt-pill.is-on`과 같은 방향으로 배경을 준다. 색-mix 대신 순수 토큰만 쓴다(MDS 검사
   통과). font-weight 는 `.chip` 기본값이 이미 500이라 따로 안 준다. `.pt-chips` 로
   스코프를 좁혀 이 킷 파일의 다른 `.chip` 쓰임에는 영향 없게 함. */
.pt-chips .chip {
  background: var(--mds-s-color-neutral-background-sunken);
}

/* 지원 형식 안내 — MDS helptext 컴포넌트 규격을 따른다.
   임의 회색 12px + 손으로 그린 원(?)을 쓰지 않는다.
   helptext는 필드 아래 왼쪽 정렬이 기본이라 가운데 정렬도 쓰지 않는다. */
#px-types {
  display: flex; align-items: center;
  gap: calc(var(--mds-c-helptext-spacing-itemgap-default-sideitem-s) * 1px);
  margin: calc(var(--mds-b-spacing-30) * 1px) 0 calc(var(--mds-b-spacing-10) * 1px);
  font: var(--mds-c-helptext-typography-s);
  color: var(--mds-c-helptext-color-contents-normal);
}
#px-types .px-help {
  width: calc(var(--mds-c-helptext-size-icon-sideicon-s) * 1px);
  height: calc(var(--mds-c-helptext-size-icon-sideicon-s) * 1px);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--mds-c-helptext-color-contents-normal);
}
#px-types .px-help:hover { color: var(--mds-s-color-neutral-contents-default); }
#px-types .px-help svg { display: block; }

/* ---------- 문서 타일 ----------
   손으로 그리지 않는다. 킷 에디터 실측 규격을 그대로 따른다.
     .up-fgrid  3열 x 98px, gap 8, justify-content start
     .up-fbox   98x98, radius 8, border 1.25 solid, 옅은 회색 배경, 아이콘 중앙
     figcaption margin-top 8, 14px/400, 말줄임
   PPTX는 썸네일을 만들 수 없다(「PDF 임포트 업무」: 썸네일처럼 보여주는 것은 불가)
   → 이미지 타일이 아니라 이 정사각 타일 규격이 맞다.
   문서와 이미지를 가르는 표시만 더한다: 보라 테두리 + 우하단 열기 아이콘. */
.px-docsec .up-ftile { cursor: pointer; }
.px-docsec .up-fbox { position: relative; }

/* 문서임을 알리는 테두리. 두께·크기는 실측 그대로 두고 색만 바꾼다. */
.px-doc-mark {
  border-color: var(--mds-s-color-brand-primary-default) !important;
}
.px-doc-mark.is-busy {
  border-style: dashed !important;
}

/* 열기 표시. 이미지는 삽입, 문서는 열기라 생김새로 먼저 구분한다. */
.px-openmark {
  position: absolute;
  right: calc(var(--mds-b-spacing-20) * 1px);
  bottom: calc(var(--mds-b-spacing-20) * 1px);
  width: calc(var(--mds-c-iconbutton-size-xxs) * 1px);
  height: calc(var(--mds-c-iconbutton-size-xxs) * 1px);
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--mds-b-radius-30) * 1px);
  background: var(--mds-s-color-neutral-background-default);
  border: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
  color: var(--mds-s-color-neutral-contents-default);
}

/* 장수는 캡션 아래 한 줄. 파일명과 같은 리듬을 쓴다. */
.px-docsub {
  display: block;
  margin-top: calc(var(--mds-b-spacing-10) * 1px);
  font: var(--mds-s-typography-body-s);
  color: var(--mds-s-color-neutral-contents-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 진입점 뱃지 ---------- */
.px-pro {
  /* MDS premiumbadge ghost m = 20 */
  min-height: calc(var(--mds-c-premiumbadge-size-ghost-m) * 1px); display: inline-flex; align-items: center;
  font: var(--mds-s-typography-label-semibold-s);
  color: var(--mds-s-color-brand-primary-accessible);
  background: var(--mds-s-color-brand-primary-surface);
  border-radius: calc(var(--mds-b-radius-pill) * 1px); padding: calc(var(--mds-b-spacing-10) * 1px) calc(var(--mds-b-spacing-30) * 1px);
}
.px-busy-tag {
  font: var(--mds-s-typography-label-semibold-s);
  color: var(--mds-s-color-brand-primary-accessible);
}

/* ---------- 드롭 오버레이 ----------
   2026-09-04 삭제. 실서버 에디터는 파일을 끌고 들어와도 아무 표시를 하지 않고(실측),
   이번 드래그앤드롭 과업에서 새로 만들지도 않기로 확정했다. 놓은 뒤의 판정과 모달이
   결과를 다 말해 주므로 끌고 오는 중에 띄울 것이 없다. 판정·문구는 pptx-overlay.js 의
   `드래그앤드롭` 절과 `../드래그앤드롭_최종정책_도표.md` 가 정본이다. */

/* ---------- 모달 ----------
   새 확인·거절 모달이 필요하면 여기 값을 다시 재지 말고 .px-modal.px-confirm 을 그대로 재사용한다.
   딤드·그림자·패딩·반경 전부 mds/components/Modal/spec.md의 "구현 체크리스트" 절이 정본이다
   (2026-08-29 확정). 값이 안 맞는 게 보이면 이 파일이 아니라 그 문서부터 갱신한다. */
#px-scrim {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  /* MDS dimmed 토큰. `p-mds-dimmed` 컴포넌트를 직접 열어 확인한 실제 기본값은
     strength=medium, color=black(색 자체가 검정, "neutral"이 아니다) — 이전엔
     검증 없이 neutral-medium(#2f333fb8, 72% 남색)을 썼는데, 실제 컴포넌트 기본값은
     black-medium(#00000080, 검정 50%)이다(2026-08-29 정정). */
  background: var(--mds-c-dimmed-color-background-black-medium);
}
#px-scrim.on { display: flex; }
.px-modal {
  width: 400px; max-width: calc(100vw - var(--mds-b-spacing-100) * 1px);
  background: var(--mds-s-color-neutral-background-default);
  border: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
  border-radius: calc(var(--mds-b-radius-50) * 1px);
  /* 표준 모달 그림자는 shadow/neutral/lg(2겹). heavy-20(1겹)은 다른 토큰이라 안 쓴다(26.08.29 정정). */
  box-shadow: var(--mds-shadow-neutral-lg);
  padding: calc(var(--mds-b-spacing-90) * 1px); color: var(--mds-s-color-neutral-contents-default);
}
/* Figma p-mds-confirmModal 규격(98:16527). 480px 폭 · 가운데 정렬 · 우상단 ✕ ·
   버튼 두 개를 가운데에 나란히. 목업용 큰 모달에는 이 클래스를 안 붙인다. */
.px-modal.px-confirm { position: relative; width: 480px; text-align: center; }
/* 16은 MDS 컴포넌트 토큰에 없는 값이라(가장 가까운 게 8·10·12·14) 근사하지 않고 리터럴로 둔다.
   Figma 실측(10개 인스턴스 전수) + 같은 킷의 .mds-dlg("MDS 규격")도 독립적으로 16을 씀 —
   두 출처가 같은 값이라 우연이 아님(mds/components/Modal/spec.md 레시피 절 참고). */
.px-modal.px-confirm { border-radius: 16px; } /* mds-new-spec: b/radius 스케일(0~14,pill)에 16 없음, 실측 모달/바텀시트 모서리값 */
/* Figma 는 헤더(56) · 본문(좌우 40, 위 0, 아래 20) · 버튼바(위 20, 아래 40) 3단으로
   패딩이 갈린다 — 우리는 한 박스라 위/좌우/아래를 그 3단 합으로 덮어쓴다(26.08.29 정정,
   전엔 균일 24라 타이틀이 25px에서 시작해 전체 높이가 151(vs 204) 로 53px 짧았다).
   위: 헤더존 56 = 아이콘 위여백16 + 아이콘32 + 아이콘 아래여백8(전부 실토큰 합성).
   좌우: 40(본문 실측값, 토큰 없어 리터럴). 아래: 40(버튼바 아래 실측값, 토큰 없어 리터럴). */
.px-modal.px-confirm {
  padding-top: calc((var(--mds-b-spacing-70) + var(--mds-c-iconbutton-size-s) + var(--mds-b-spacing-40)) * 1px);
  padding-left: 40px; padding-right: 40px; padding-bottom: 40px;
}
/* 본문 아래(20) + 버튼바 위(20) = 40. 실토큰 두 개(spacing-80)의 합이라 40 자체는 리터럴로 쓴다. */
.px-modal.px-confirm .px-acts { justify-content: center; margin-top: 40px; }
/* Figma 실측(97:9427): 버튼 160px 고정 · 간격 8. 148px 는 근사값이었다(26.08.29 정정). */
.px-modal.px-confirm .px-btn { min-width: 160px; }
/* Figma 실측: 보조 버튼은 흰 배경+테두리가 아니라 `commonButton neutralDeep/fillLight` —
   회청색 9% 틴트 배경, 테두리 없음(26.08.29 정정, 전엔 흰 배경+15% 테두리였다). */
.px-modal.px-confirm .px-btn:not(.p) {
  background: var(--mds-c-commonbutton-color-background-neutraldeep-filllight-default);
  border-color: transparent;
  color: var(--mds-c-commonbutton-color-contents-neutraldeep-filllight-default);
}
/* Figma 실측: 타이틀 20px SemiBold(title-l). title-s(16px) 는 한 단계 작은 토큰이었다(26.08.29 정정). */
.px-modal.px-confirm h4 { font: var(--mds-s-typography-title-l); }
/* Figma 실측: 닫기 아이콘버튼 32×32 · radius 8 · 모서리에서 16 안쪽. 24×24 는 한 단계 작았다(26.08.29 정정). */
.px-modal.px-confirm .px-modal-x {
  top: calc(var(--mds-b-spacing-70) * 1px); right: calc(var(--mds-b-spacing-70) * 1px);
  width: calc(var(--mds-c-iconbutton-size-s) * 1px); height: calc(var(--mds-c-iconbutton-size-s) * 1px);
  border-radius: calc(var(--mds-b-radius-40) * 1px);
}
.px-modal-x {
  position: absolute;
  top: calc(var(--mds-b-spacing-60) * 1px); right: calc(var(--mds-b-spacing-60) * 1px);
  display: flex; align-items: center; justify-content: center;
  width: calc(var(--mds-b-spacing-90) * 1px); height: calc(var(--mds-b-spacing-90) * 1px);
  border: 0; background: transparent; cursor: pointer;
  border-radius: calc(var(--mds-b-radius-30) * 1px);
  color: var(--mds-s-color-neutral-contents-sub);
}
.px-modal-x:hover { background: var(--mds-s-color-neutral-background-sunken); }

/* 타이포는 전부 MDS 토큰. 임의 px를 쓰지 않는다. */
.px-modal h4 { font: var(--mds-s-typography-title-s); margin: 0 0 calc(var(--mds-b-spacing-40) * 1px); }
.px-modal p { font: var(--mds-s-typography-body-m); color: var(--mds-s-color-neutral-contents-sub); margin: 0 0 calc(var(--mds-b-spacing-20) * 1px); }
.px-file {
  display: flex; align-items: center; gap: calc(var(--mds-b-spacing-40) * 1px);
  background: var(--mds-s-color-neutral-background-sunken);
  border-radius: calc(var(--mds-b-radius-30) * 1px); padding: calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-60) * 1px);
  font: var(--mds-s-typography-body-strong-m); margin: calc(var(--mds-b-spacing-60) * 1px) 0;
}
.px-file .px-fsub { font: var(--mds-s-typography-body-m); color: var(--mds-s-color-neutral-contents-sub); }
.px-note {
  font: var(--mds-s-typography-body-s);
  color: var(--mds-s-color-neutral-contents-sub);
  display: flex; gap: calc(var(--mds-b-spacing-30) * 1px); margin: calc(var(--mds-b-spacing-40) * 1px) 0 0;
}
.px-note.bad { color: var(--mds-s-color-semantic-negative-default); }
/* 미지원 형식으로 막힌 파일명 목록(드래그앤드롭 검사 ②). 실서버 모달과 같이 본문 아래에
   불릿으로 전부 나열한다 — 개수를 자르지 않는다(10개까지 안 깨지는 것을 26.09.04 실측).
   목록만 스크롤시킨다. 안 그러면 모달이 화면보다 길어지는데, #px-scrim 이 세로 가운데
   정렬이고 스크롤이 없어서 위아래가 동시에 잘린다 — 제목도 [확인] 버튼도 화면 밖으로
   나가고 Esc·바깥클릭 말고는 닿을 방법이 없다(26.09.05 실측: 창 760px에서 31개, 900px에서
   39개부터 파손). 목록만 가두면 제목·본문·버튼이 항상 보이고 파일명은 전부 남는다.
   40vh 는 디자인 값이 아니라 "화면을 넘기지 않는다"는 런타임 제약이라 토큰 대상이 아니다. */
.px-badlist {
  max-height: 40vh; /* mds-new-spec: 화면 높이에 대한 런타임 제약, 디자인 토큰 대상 아님 */
  overflow-y: auto;
  /* .px-modal.px-confirm 이 text-align:center 라(122행) 목록만 왼쪽으로 되돌린다.
     상속값은 요소 자신의 선언에 지므로 명세를 더 올릴 필요는 없다. */
  text-align: left;
  margin: calc(var(--mds-b-spacing-40) * 1px) 0 0;
  padding-left: calc(var(--mds-b-spacing-70) * 1px);
  font: var(--mds-s-typography-body-m);
  color: var(--mds-s-color-neutral-contents-sub);
  word-break: break-all;
}
.px-badlist li { margin: 0 0 calc(var(--mds-b-spacing-20) * 1px); }
.px-acts { display: flex; justify-content: flex-end; gap: calc(var(--mds-b-spacing-40) * 1px); margin-top: calc(var(--mds-b-spacing-80) * 1px); }
.px-btn {
  /* MDS button: size m = 40, radius square m = 8, borderwidth m = 1 */
  height: calc(var(--mds-c-button-size-container-m) * 1px); padding: 0 calc(var(--mds-b-spacing-70) * 1px);
  border-radius: calc(var(--mds-c-button-radius-square-m) * 1px);
  font: var(--mds-s-typography-body-strong-m); cursor: pointer;
  border: calc(var(--mds-c-button-borderwidth-m) * 1px) solid var(--mds-s-color-neutral-border-default);
  background: var(--mds-s-color-neutral-background-default);
  color: var(--mds-s-color-neutral-contents-default);
}
.px-btn.p {
  background: var(--mds-s-color-brand-primary-default);
  border-color: var(--mds-s-color-brand-primary-default);
  color: var(--mds-s-color-neutral-contents-inverse-default);
}
.px-check { display: flex; align-items: center; gap: calc(var(--mds-b-spacing-30) * 1px); font: var(--mds-s-typography-body-s); color: var(--mds-s-color-neutral-contents-sub); margin-top: calc(var(--mds-b-spacing-70) * 1px); }

/* ---------- 스낵바 ---------- */
#px-snacks {
  /* 하단 중앙 정렬(bottom 64)은 킷 기본값이었을 뿐, 실제 화면은 우측 하단 ·
     페이지리스트+하단바(editor.html 실측 1968×152, "bottom-strip" 주석 참고)
     바로 위다(2026-08-28 스크린샷 대조 지적). */
  position: fixed; right: calc(var(--mds-b-spacing-70) * 1px); left: auto; transform: none;
  bottom: calc(152px + var(--mds-b-spacing-70) * 1px);
  z-index: 95; display: flex; flex-direction: column; gap: calc(var(--mds-b-spacing-40) * 1px); align-items: flex-end;
}
/* 상단바(64) 아래 가운데. 결과물 자체를 말하는 알림 자리다(2026-08-28 지시:
   "일부 요소만 가져온 경우는 헤더쪽 스낵바로"). 진행 상황(#px-snacks)과 자리를 나눈다. */
#px-snacks-top {
  position: fixed; top: calc(var(--mds-b-spacing-140) * 1px + var(--mds-b-spacing-70) * 1px);
  left: 50%; transform: translateX(-50%);
  z-index: 95; display: flex; flex-direction: column; gap: calc(var(--mds-b-spacing-40) * 1px); align-items: center;
}
.px-snack {
  /* MDS snackbar: radius oneline = 10, itemgap = 12 */
  display: flex; align-items: center;
  gap: calc(var(--mds-c-snackbar-spacing-itemgap-default) * 1px);
  max-width: min(560px, 80vw); padding: calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-70) * 1px);
  border-radius: calc(var(--mds-c-snackbar-radius-oneline) * 1px);
  /* 라이트/다크 모두 역상 고정. static 토큰이라 테마에 따라 안 뒤집힌다.
     다크에서 캔버스에 묻히는 건 배경 반전이 아니라 테두리·그림자로 푼다. */
  background: var(--mds-s-color-neutral-static-black-default);
  color: var(--mds-s-color-neutral-static-white-default);
  border: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-static-white-light);
  box-shadow: var(--mds-s-shadow-popover);
  font: var(--mds-s-typography-body-s);
}
/* Figma 스낵바(98:9642)는 진행 막대가 아니라 원형 스피너다. SDK 가 퍼센트를 주지 않으므로
   (phase 마다 1회뿐) 가짜 진행률을 그리지 않고 돌기만 하는 표시가 맞다. */
.px-snack .px-spin {
  width: calc(var(--mds-b-spacing-80) * 1px); height: calc(var(--mds-b-spacing-80) * 1px); flex: none;
  border-radius: calc(var(--mds-b-radius-pill) * 1px);
  border: calc(var(--mds-b-borderwidth-30) * 1px) solid var(--mds-s-color-neutral-static-white-light);
  border-top-color: var(--mds-s-color-neutral-static-white-default);
  animation: px-spin 900ms linear infinite;
}
@keyframes px-spin { to { transform: rotate(360deg); } }
.px-snack .px-sact {
  margin-left: calc(var(--mds-b-spacing-20) * 1px); font: var(--mds-s-typography-body-strong-s); cursor: pointer;
  color: var(--mds-s-color-brand-primary-light);
}
.px-snack.bad { border-color: var(--mds-s-color-semantic-negative-default); }

/* ---------- 새 탭 흉내 (완료 후 "열기") ---------- */
/* 데모라 진짜 새 브라우저 탭을 못 띄운다. 얇은 탭바만 얹어 "새 탭에서 열렸다"를
   보여준다. 어느 탭을 눌러도(원본 탭 · 새 탭의 ×) 이 띠를 지우는 것으로 끝난다 —
   뒤에는 이미 업로드 탭이 열려 있다(pptx-overlay.js openInNewTabFake). */
#px-tabstrip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10060;
  display: flex; align-items: flex-end; gap: calc(var(--mds-b-spacing-10) * 1px);
  height: 36px; padding: calc(var(--mds-b-spacing-20) * 1px) calc(var(--mds-b-spacing-30) * 1px) 0;
  background: var(--mds-s-color-neutral-background-sunken);
  border-bottom: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
}
.px-tab {
  display: flex; align-items: center; gap: calc(var(--mds-b-spacing-20) * 1px);
  max-width: 220px; height: calc(var(--mds-b-spacing-100) * 1px); padding: 0 calc(var(--mds-b-spacing-40) * 1px);
  border: 0; border-radius: calc(var(--mds-b-radius-20) * 1px) calc(var(--mds-b-radius-20) * 1px) 0 0;
  background: transparent; color: var(--mds-s-color-neutral-contents-sub);
  font: var(--mds-s-typography-body-s); cursor: pointer;
}
.px-tab.is-on {
  background: var(--mds-s-color-neutral-background-default);
  color: var(--mds-s-color-neutral-contents-default);
}
.px-tab-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-tab-x {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: calc(var(--mds-b-radius-pill) * 1px); color: var(--mds-s-color-neutral-contents-sub);
}
.px-tab-x:hover { background: var(--mds-s-color-neutral-background-sunken); }

/* ---------- 검토용 패널 (실제 UI 아님) ---------- */
/* 평소에는 아이콘 하나. 제품 UI로 오해되지 않게 점선 테두리를 쓴다.
   에디터 하단바(디자인 에디터·배율·설정)를 가리지 않는 높이에 둔다. */
#px-fab {
  position: fixed; right: 14px; bottom: calc(var(--mds-b-spacing-130) * 1px); z-index: 121;
  width: 38px; height: 38px; border-radius: calc(var(--mds-b-radius-pill) * 1px);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--mds-s-color-neutral-background-default);
  border: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-default);
  color: var(--mds-s-color-neutral-contents-sub);
  box-shadow: var(--mds-c-elevatediconbutton-shadow-2xl);
}
#px-fab:hover { color: var(--mds-s-color-neutral-contents-default); }
#px-fab.on {
  background: var(--mds-s-color-brand-primary-default);
  border-color: var(--mds-s-color-brand-primary-default);
  color: var(--mds-s-color-neutral-contents-inverse-default);
}
#px-fab: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);
}

/* 실제 다운로드/공유 팝오버와 같은 컴포넌트(.tb-pop* / .pt-pill / .tb-label)를 그대로 가져다 쓴다.
   여기서는 고정 위치·너비·스크롤처럼 이 패널만의 배치값만 얹는다. */
#px-dev {
  position: fixed; right: 14px; bottom: 102px; z-index: 120;
  background: var(--mds-s-color-neutral-background-default);
  border: none; border-radius: calc(var(--mds-b-radius-50) * 1px);
  box-shadow: var(--mds-s-shadow-popover);
  width: 360px; /* 2026-09-11 지시 */ color: var(--mds-s-color-neutral-contents-default);
  /* 헤더(제목·닫기)는 고정, 본문만 스크롤한다 — flex 컬럼으로 나눈다.
     항목이 계속 늘어나는 패널이라(진입점·케이스) 뷰포트를 넘지 않게 상한을 둔다
     (2026-08-29 지적 — "계속 길어지네"). 위아래 여유 spacing-160(80)*2 만큼 뺀다. */
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--mds-b-spacing-160) * 2 * 1px); overflow: hidden;
}
#px-dev.px-closed { display: none; }
#px-dev .tb-pop-head {
  flex: none; height: auto; padding: calc(var(--mds-b-spacing-60) * 1px) calc(var(--mds-b-spacing-70) * 1px);
  border-bottom: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-default);
}
#px-dev .tb-pop-body {
  overflow-y: auto; row-gap: 0;
  padding: calc(var(--mds-b-spacing-70) * 1px) calc(var(--mds-b-spacing-70) * 1px) calc(var(--mds-b-spacing-60) * 1px);
}
#px-dev .px-grp { display: flex; flex-wrap: wrap; gap: calc(var(--mds-b-spacing-20) * 1px); margin-bottom: calc(var(--mds-b-spacing-80) * 1px); }
#px-dev .tb-label { margin-bottom: calc(var(--mds-b-spacing-20) * 1px); }
/* .pt-pill 은 실물에서 3개짜리 업로드 필터 알약(51/51/63px 고정폭) 하나에만 쓰인 값이라
   nth-child 고정폭이 박혀 있다. 여기는 알약 수·글자 길이가 그룹마다 달라 폭을 내용에 맡긴다. */
#px-dev .pt-pill { width: auto; }

/* 정상 Flow 버튼. 나머지 알약(pt-pill)류와 다르게 눈에 띄어야 해서 채움 버튼 모양을 쓴다. */
#px-dev .px-dev-cta {
  display: block; width: 100%; text-align: center;
  margin-bottom: calc(var(--mds-b-spacing-80) * 1px);
  padding: calc(var(--mds-b-spacing-40) * 1px) calc(var(--mds-b-spacing-60) * 1px);
  border: none; border-radius: calc(var(--mds-b-radius-40) * 1px);
  background: var(--mds-s-color-brand-primary-default); color: var(--mds-s-color-neutral-static-white-default);
  font: var(--mds-s-typography-body-strong-s); cursor: pointer;
}
#px-dev .px-dev-cta:hover { background: var(--mds-s-color-brand-primary-accessible); }
/* "PPTX 파일 가져오기" 카테고리 묶음. 상태·언어(전역 설정)와 시각적으로 구분한다. */
#px-dev .px-dev-cat {
  border-top: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
  /* 2026-09-11 지시: 접힌 줄이 바로 아래 디바이더에 딱 붙어 있었다(아래 여백 0).
     위쪽 16 과 같은 값을 아래에도 줘서 줄이 선 사이 가운데 오게 한다. */
  padding-top: calc(var(--mds-b-spacing-70) * 1px);
  padding-bottom: calc(var(--mds-b-spacing-70) * 1px);
}
#px-dev .px-dev-cat-title {
  margin: 0 0 calc(var(--mds-b-spacing-60) * 1px);
  font: var(--mds-s-typography-title-xs); color: var(--mds-s-color-neutral-contents-default);
}
/* 2026-09-09 지시: PPTX·이미지 분해 카테고리를 아코디언으로 접음(기본 접힘). */
#px-dev .px-dev-cat-title[data-cat-toggle] {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  margin-bottom: 0;
}
#px-dev .px-dev-cat-chev { display: inline-flex; transition: transform var(--dur-fast) ease; }
#px-dev .px-dev-cat-title.is-open .px-dev-cat-chev { transform: rotate(180deg); }
#px-dev .px-dev-cat-body { margin-top: calc(var(--mds-b-spacing-60) * 1px); }
/* 서브카테고리(진입점·케이스) 라벨. 카테고리 제목 바로 아래라 tb-label 기본 위 여백을 줄인다. */
#px-dev .px-dev-sub { margin-top: calc(var(--mds-b-spacing-40) * 1px); }
#px-dev .px-dev-cat .px-dev-sub:first-of-type { margin-top: 0; }

/* ---------- 구좌 A. 문서 칩 빈 상태 ---------- */
.px-empty {
  /* MDS emptystate: sentence gap 4, graphic gap 16(m), 타이포·색도 토큰 */
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--mds-c-emptystate-spacing-itemgap-sentence-m) * 1px);
  padding: calc(var(--mds-b-spacing-100) * 1px) calc(var(--mds-b-spacing-70) * 1px); margin-bottom: calc(var(--mds-b-spacing-60) * 1px);
  border: calc(var(--mds-b-borderwidth-15) * 1px) dashed var(--mds-s-color-neutral-border-default);
  border-radius: calc(var(--mds-b-radius-40) * 1px);
  background: var(--mds-s-color-neutral-background-sunken);
  color: var(--mds-s-color-neutral-contents-default);
}
.px-empty .px-emico {
  display: inline-flex; color: var(--mds-s-color-neutral-contents-sub);
  margin-bottom: calc((var(--mds-c-emptystate-spacing-itemgap-graphic-m) - var(--mds-b-spacing-20)) * 1px);
}
.px-empty b { font: var(--mds-c-emptystate-typography-title-m); color: var(--mds-c-emptystate-color-contents-text-title); }
.px-empty span:not(.px-emico) { font: var(--mds-c-emptystate-typography-sub-m); color: var(--mds-c-emptystate-color-contents-text-sub); }
.px-empty .px-emtypes { margin-top: calc(var(--mds-b-spacing-30) * 1px); font: var(--mds-s-typography-body-s); }

/* 버튼 2개. PDF를 같은 자리에 흡수했으므로 무엇을 가져올지 고를 수 있어야 한다. */
.px-empty .px-embtns {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(var(--mds-b-spacing-30) * 1px);
  margin-top: calc(var(--mds-b-spacing-60) * 1px);
}
.px-embtn {
  position: relative; display: inline-flex; align-items: center;
  gap: calc(var(--mds-b-spacing-20) * 1px); cursor: pointer;
  min-height: calc(var(--mds-c-button-size-container-s) * 1px);
  padding: 0 calc(var(--mds-b-spacing-50) * 1px);
  border: calc(var(--mds-c-button-borderwidth-s) * 1px) solid var(--mds-s-color-neutral-border-default);
  border-radius: calc(var(--mds-c-button-radius-square-s) * 1px);
  background: var(--mds-s-color-neutral-background-default);
  color: var(--mds-s-color-neutral-contents-default);
  font: var(--mds-c-commonbutton-typography-s); /* 500 14px/20.5px */
}
.px-embtn:hover { background: var(--mds-s-color-neutral-background-sunken); }
/* 터치 타깃은 44px 이상이어야 한다. MDS button 컨테이너 L(48)로 올린다. S(32)는 미달이다. */
@media (pointer: coarse), (max-width: 768px) {
  .px-embtn { min-height: calc(var(--mds-c-button-size-container-l) * 1px); border-radius: calc(var(--mds-c-button-radius-square-l) * 1px); padding: 0 calc(var(--mds-b-spacing-60) * 1px); }
}

/* ---------- 고지 툴팁 (좌탭 New 점과 짝) ---------- */
#px-tip {
  position: fixed; left: var(--px-x); top: var(--px-y); transform: translateY(-50%);
  z-index: 10040; max-width: 268px;
  display: flex; align-items: flex-start; gap: calc(var(--mds-b-spacing-30) * 1px);
  padding: calc(var(--mds-b-spacing-40) * 1px) calc(var(--mds-b-spacing-50) * 1px);
  border-radius: calc(var(--mds-c-tooltip-radius-default) * 1px);
  background: var(--mds-c-tooltipsentence-color-background-black);
  color: var(--mds-c-tooltipsentence-color-contents-black-sentencetext);
  font: var(--mds-c-tooltipsentence-typography-s-sentencetext);
  box-shadow: var(--mds-s-shadow-popover);
}
/* 좁은 화면: 오른쪽 대신 아래로. 화살표도 위쪽을 가리킨다.
   꼬리 위치는 고정값이 아니라 JS가 앵커 중앙 기준으로 계산한 --px-arrow-x를 쓴다
   (2026-08-29 정정: 왼쪽에서 16px 고정이라 앵커 위치에 따라 꼬리가 엉뚱한 데를 가리켰다). */
#px-tip.px-tip-below { transform: none; max-width: calc(100vw - var(--mds-b-spacing-90) * 1px); }

/* 꼬리(2026-08-29 재구현): 정사각형이 아니라 14×8 직사각형을 45도 돌리던 방식이라
   찌그러진 사각형으로 보였다(사용자 지적). "박스와 같은 색 절반을 박스 안쪽에 숨긴다"는
   전제도 box-shadow 때문에 깨지기 쉽다 — 그림자는 박스의 사각형 테두리에만 지고 이
   pseudo-element에는 안 지니까 경계에서 이질감이 생긴다. 테두리 삼각형(border-triangle)
   기법으로 바꾼다: 실제로 3개 꼭짓점만 있는 삼각형이라 회전·반색·그림자 전부와 무관하게
   항상 삼각형으로 보인다. width는 밑변(spread), height는 뾰족한 길이(protrude)로 쓴다. */
#px-tip::before {
  content: ''; position: absolute; width: 0; height: 0;
  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-c-tooltipsentence-color-background-black);
}
/* 아래로 뜰 때는 방향이 90도 다르다: 왼쪽을 가리키던 변(top/bottom 투명 + right 채움)을
   위쪽을 가리키는 변(left/right 투명 + bottom 채움)으로 통째로 바꾼다. */
#px-tip.px-tip-below::before {
  top: calc(var(--mds-c-tooltip-size-arrow-height-default) * -1px);
  left: var(--px-arrow-x, 50%); transform: translateX(-50%);
  border-top: 0; border-right: calc(var(--mds-c-tooltip-size-arrow-width-default) * 0.5px) solid transparent;
  border-left: calc(var(--mds-c-tooltip-size-arrow-width-default) * 0.5px) solid transparent;
  border-bottom: calc(var(--mds-c-tooltip-size-arrow-height-default) * 1px) solid var(--mds-c-tooltipsentence-color-background-black);
}
.px-tip-x {
  flex: none; cursor: pointer; background: none; border: 0; padding: 0;
  color: var(--mds-c-tooltipsentence-color-contents-black-subtext);
}
.px-tip-x:hover { color: var(--mds-c-tooltipsentence-color-contents-black-sentencetext); }

/* ---------- 태블릿·모바일 ---------- */
/* 에디터 껍데기 자체는 데모가 데스크탑 재현물이라 반응형이 아니다.
   여기서 맞추는 건 이 설계가 새로 넣는 표면(모달·스낵바·드롭존)뿐이다. */
@media (max-width: 768px) {
  /* .px-modal.px-confirm(위 138행)이 클래스 2개라 이 미디어쿼리 밖 .px-modal 보다 명세가 높다.
     같은 명세(.px-modal.px-confirm)로 덮어써야 모바일에서 위쪽만 둥근 바텀시트가 실제로 먹는다
     (2026-08-29 발견 — .px-modal 만 있던 이전 규칙은 데스크탑 확정 모달에서 씹혔다). */
  .px-modal, .px-modal.px-confirm {
    width: 100%; max-width: none;
    /* 데스크탑과 같은 16(리터럴). 여긴 MDS 근거가 없는 자체 반응형이라 10을 썼었는데
       데스크탑 모서리를 16으로 정정하며 같이 어긋났던 것을 잡는다(2026-08-29). */
    border-radius: 16px 16px 0 0; /* mds-new-spec: b/radius 스케일(0~14,pill)에 16 없음, 실측 모달/바텀시트 모서리값 */
    /* 좌우 spacing-80(20). `p-mds-bottomSheet`를 이루는 pd-bodyContainer 기본값(scrollPadding=L 20px)과
       pd-footerContainer 기본값(8px 20px)이 둘 다 좌우 20이라 여기 맞춘다(전엔 근거 없이 16이었다,
       2026-08-29 정정 — 실제 24라는 값은 이 컴포넌트 어디에도 없고, 이 프로젝트 자체 목업 모달의
       `.px-modal{padding:spacing-90}` 값을 착각해 옮겨 적은 것이었다). */
    padding: calc(var(--mds-b-spacing-80) * 1px) calc(var(--mds-b-spacing-80) * 1px) calc(var(--mds-b-spacing-80) * 1px + env(safe-area-inset-bottom));
    /* 그림자도 데스크탑(shadow/neutral/lg)과 다른 전용 토큰(s/shadow/bottomSheet). 이 토큰은
       추출 원본이 깨져 있어(범위 밖 문서표 스크랩, 안 풀린 JSON을 그대로 박아둠) 그동안 못
       써서 데스크탑 그림자를 상속해 썼다 — `p-mds-bottomSheet`를 직접 열어 실측(offset 0/24,
       blur 64, spread 0, #00000033)한 값으로 토큰 원본(mds/_raw/rest-audit/foundation-registry.json)
       자체를 고치고 mds/tokens 를 다시 빌드해 바로잡았다(2026-08-29). */
    box-shadow: var(--mds-s-shadow-bottomsheet);
  }
  /* 확정 모달만 핸들 자리만큼 위 여백을 더 준다. MDS `p-mds-bottomSheet` 실측:
     핸들은 8(위) + 4(핸들 높이) + 8(아래) = 20 짜리 제 밴드를 갖고, 콘텐츠는 그 밴드가
     끝난 뒤에 시작한다 — 핸들과 타이틀이 겹치거나 붙지 않는다. 지금까지는 이 밴드 없이
     핸들을 그냥 띄워놓고 본문 패딩(spacing-80=20)을 그대로 써서 핸들 아래 여백이 10px밖에
     안 남아 붙어 보였다(2026-08-29 지적, 실측 후 정정).
     실제 컴포넌트의 header 구역 기본값은 패딩 none(핸들 밴드 외 추가 여백 없음)이지만, 그 구역에
     실제로 어떤 콘텐츠(제목)가 들어가는지는 이 프로젝트가 직접 만든 것이라 정확한 수치를 못 뽑는다
     — 위 실측(붙어 보임)을 근거로 spacing-40*2+4+spacing-70=36 을 그대로 둔다(확인 필요로 남김). */
  .px-modal.px-confirm {
    padding-top: calc((var(--mds-b-spacing-40) * 2 + 4 + var(--mds-b-spacing-70)) * 1px);
  }
  /* 버튼바 위 여백. 데스크탑은 40(본문 패딩 20 + 버튼바 패딩 20 합)인데, `p-mds-bottomSheet`의
     pd-footerContainer 기본값은 8px 20px(세로 8·가로 20)이라 세로가 훨씬 좁다. body 쪽
     buttomPadding 기본값도 none(0)이라 본문~버튼 간격은 실제로 8이 전부다(2026-08-29 확인). */
  .px-modal.px-confirm .px-acts {
    margin-top: calc(var(--mds-b-spacing-40) * 1px);
  }
  /* 드래그 핸들. MDS `p-mds-bottomSheet`(라이브러리 "4. pd-components") 실측 — 32×4, 완전히
     둥근 바. 이 프로젝트 반응형은 그 컴포넌트를 안 쓰고 데스크탑 모달에 CSS만 얹은 것이라
     핸들이 원래 없었다 — 실제 바텀시트 컴포넌트에 있는 요소라 추가한다(2026-08-29). */
  .px-modal.px-confirm::before {
    content: ''; position: absolute; top: calc(var(--mds-b-spacing-40) * 1px); left: 50%;
    transform: translateX(-50%);
    width: calc(var(--mds-b-spacing-100) * 1px); height: calc(var(--mds-b-spacing-20) * 1px); border-radius: calc(var(--mds-b-radius-pill) * 1px);
    background: var(--mds-s-color-neutral-border-default);
  }
  #px-scrim { align-items: flex-end; }
  .px-acts { flex-direction: column-reverse; }
  .px-acts .px-btn { width: 100%; height: 44px; }  /* 터치 타깃 44px */
  #px-snacks { left: calc(var(--mds-b-spacing-60) * 1px); right: calc(var(--mds-b-spacing-60) * 1px); transform: none; bottom: calc(var(--mds-b-spacing-60) * 1px); }
  #px-snacks-top { left: calc(var(--mds-b-spacing-60) * 1px); right: calc(var(--mds-b-spacing-60) * 1px); transform: none; }
  .px-snack { max-width: none; width: 100%; }
  .px-doc-grid { grid-template-columns: repeat(2, 1fr); }
  #px-dev { left: calc(var(--mds-b-spacing-60) * 1px); right: calc(var(--mds-b-spacing-60) * 1px); bottom: 60px; width: auto; }
  #px-fab { right: calc(var(--mds-b-spacing-60) * 1px); bottom: calc(var(--mds-b-spacing-60) * 1px); }
}
@media (pointer: coarse) {
  /* 터치 기기에는 드래그앤드롭이 없다. 드롭 오버레이가 없어져 여기서 숨길 것도 없어졌고,
     드롭 리스너 자체를 isTouch() 로 막는다(pptx-overlay.js). */
  .px-btn { min-height: 44px; }
}

/* ---------- 모션 ---------- */
@media (prefers-reduced-motion: reduce) {
  .px-snack .px-spin { animation: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 포커스 ---------- */
.px-btn:focus-visible, .px-doc:focus-visible, .px-embtn:focus-visible, .px-tip-x: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);
}

/* 모달이 열려 있으면 검토용 패널은 비킨다 (좁은 화면에서 시트와 겹침) */
body.px-modal-open #px-dev,
body.px-modal-open #px-fab { opacity: .12; pointer-events: none; } /* mds-new-spec: b/opacity 스케일(.1/.15)에 없는 중간값, 검토용 패널 전용 임의값 */
@media (max-width: 768px) {
  body.px-modal-open #px-dev,
  body.px-modal-open #px-fab { display: none; }
}

/* ---------- 환경 전환 (검토용) ---------- */
/* 환경 스위치는 **동작과 문구만** 바꾼다. 레이아웃은 건드리지 않는다.
   바텀시트로 바뀌는 건 창이 실제로 좁을 때뿐이다(위 @media max-width: 768px).
   PC 창에서 환경만 모바일로 바꿔놓고 바텀시트가 뜨면 그건 거짓 화면이다. */

/* 터치 환경에는 드래그앤드롭이 없다. 이건 화면 폭이 아니라 입력 방식의 문제라 환경
   스위치로 가린다 — 였는데, 드롭 오버레이가 없어져(26.09.04) 가릴 요소 자체가 사라졌다.
   터치 환경 차단은 pptx-overlay.js 의 isTouch() 가 드롭 리스너 안에서 맡는다. */

/* 검토 패널에 지금 레이아웃이 무엇으로 잡혀 있는지 적어 준다 */
#px-dev .px-hint {
  display: block; margin: calc(var(--mds-b-spacing-20) * -1px) 0 calc(var(--mds-b-spacing-40) * 1px);
  font: var(--mds-s-typography-label-medium-xs);
  color: var(--mds-s-color-neutral-contents-sub);
}

/* ---------- JS가 쓰는 유틸 클래스 ----------
   JS에서 element.style로 직접 값을 넣지 않는다. 값은 여기 토큰으로만 둔다. */
.px-grow { flex: 1; }
.px-locked { opacity: calc(var(--mds-s-opacity-disabled-default) / 100); pointer-events: none; }

/* ---------- 업로드 정보 팝오버 ----------
   실서버 실측(2026-08-25): 업로드 버튼 옆 ⓘ 가 여는 패널.
   보관 용량과 업로드 가능 파일 목록이 이미 여기 있다.
   지원 형식 안내를 따로 만들지 않고 이 목록에 "문서: PPTX" 한 줄을 더한다.
   용량 기준값 정정(설계 4-9, 2026-08-26): 실측 당시 100GB로 보였던 건 Enterprise 계정이라
   가장 큰 값을 보고 있었던 것임. 이 기능의 실제 대상은 PRO 이므로 10GB 를 기준선으로 쓴다
   (0.26GB / 10GB = 2.6%). */
#px-upinfo {
  position: fixed; left: var(--px-x); top: var(--px-y); z-index: 118;
  width: 244px;
  padding: calc(var(--mds-b-spacing-70) * 1px);
  background: var(--mds-s-color-neutral-background-default);
  border: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
  border-radius: calc(var(--mds-b-radius-60) * 1px);
  box-shadow: var(--mds-s-shadow-popover);
  color: var(--mds-s-color-neutral-contents-default);
}
.px-upinfo-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: calc(var(--mds-b-spacing-60) * 1px);
  font: var(--mds-s-typography-title-xs);
}
.px-upinfo-x {
  border: 0; background: transparent; cursor: pointer;
  color: var(--mds-s-color-neutral-contents-sub);
  font: var(--mds-s-typography-body-s);
}
.px-upinfo-quota {
  display: flex; align-items: baseline; justify-content: space-between;
  font: var(--mds-s-typography-body-s);
  color: var(--mds-s-color-neutral-contents-sub);
}
.px-upinfo-num { color: var(--mds-s-color-brand-primary-accessible); }
.px-upinfo-bar {
  height: calc(var(--mds-b-spacing-20) * 1px);
  margin: calc(var(--mds-b-spacing-30) * 1px) 0 calc(var(--mds-b-spacing-60) * 1px);
  border-radius: calc(var(--mds-b-radius-pill) * 1px);
  background: var(--mds-s-color-neutral-background-sunken); overflow: hidden;
}
.px-upinfo-bar i {
  display: block; height: 100%; width: 3%;
  background: var(--mds-s-color-brand-primary-default);
}
.px-upinfo-lab {
  margin: 0 0 calc(var(--mds-b-spacing-20) * 1px);
  font: var(--mds-s-typography-body-strong-s);
}
.px-upinfo-row {
  margin: 0; font: var(--mds-s-typography-body-s);
  color: var(--mds-s-color-neutral-contents-sub);
}
.px-upinfo-del {
  display: block; width: 100%; text-align: left;
  margin-top: calc(var(--mds-b-spacing-60) * 1px);
  padding-top: calc(var(--mds-b-spacing-60) * 1px);
  border: 0; border-top: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
  background: transparent; cursor: pointer;
  font: var(--mds-s-typography-body-s);
  color: var(--mds-s-color-semantic-negative-default);
}
/* 변환 결과 예고(표·차트·폰트) 줄. 목록과 성격이 달라 위에 구분선을 둔다. */
.px-upinfo-note {
  margin-top: calc(var(--mds-b-spacing-40) * 1px) !important;
  padding-top: calc(var(--mds-b-spacing-40) * 1px);
  border-top: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
}

/* ---------- 파일 선택 전 안내 (딤드 하단, 2026-08-27 결정) ----------
   OS 파일 선택창이 열리기 직전 배경을 어둡게 하고 하단에 형식·용량·잔여 보관량·변환 결과 예고를 보여준다.
   확인 버튼이 없다 — 선택창이 선택이든 취소든 닫히면 JS가 자동으로 같이 닫는다(pickFile). */
#px-pickscrim {
  /* 검토용 패널(#px-dev z-index 120, #px-fab 121)보다 낮으면 패널을 열어둔 채 이 안내를
     띄웠을 때 패널이 카드 위에 얹혀 가려진다. 지금 보고 있는 실제 화면이 항상 맨 위에
     오도록 검토용 장치보다 높였다(26.08.28). */
  position: fixed; inset: 0; z-index: 130; display: none;
  align-items: flex-end; justify-content: center;
  background: var(--mds-c-dimmed-color-background-neutral-medium);
}
#px-pickscrim.on { display: flex; }
.px-pickinfo {
  width: 100%; max-width: 520px;
  margin: 0 auto calc(var(--mds-b-spacing-90) * 1px);
  background: var(--mds-s-color-neutral-background-default);
  border: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
  border-radius: calc(var(--mds-b-radius-50) * 1px);
  box-shadow: var(--mds-shadow-neutral-lg);
  padding: calc(var(--mds-b-spacing-70) * 1px) calc(var(--mds-b-spacing-80) * 1px);
  color: var(--mds-s-color-neutral-contents-default);
}
.px-pickinfo p { margin: 0; font: var(--mds-s-typography-body-s); color: var(--mds-s-color-neutral-contents-sub); }
.px-pickinfo p + p { margin-top: calc(var(--mds-b-spacing-30) * 1px); }
.px-pickinfo-main { font: var(--mds-s-typography-body-strong-m) !important; color: var(--mds-s-color-neutral-contents-default) !important; }
@media (max-width: 768px) {
  .px-pickinfo { max-width: none; margin: 0 calc(var(--mds-b-spacing-60) * 1px) calc(var(--mds-b-spacing-60) * 1px); }
}

/* PRO 왕관. 실서버 패턴(텍스트 뱃지가 아니다) */
.px-pro {
  display: inline-flex; align-items: center;
  min-height: calc(var(--mds-c-premiumbadge-size-ghost-m) * 1px);
  color: var(--mds-c-thumbnailbadge-color-contents-icon-premiumgold);
  background: none; padding: 0;
}
/* 무료=노란색(위 premiumgold) · PRO(이미 있음)=회색. 사용자 확정(26.08.28) —
   지우면 "여기가 유료 자리였다"는 것 자체가 사라져서 색만 바꾸는 쪽으로 감.
   회색도 MDS 토큰이 있었다(mds/icons/svg/icon_crown_silver_topBar.svg = #D4D7DD,
   premiumgold의 실버 짝) — 처음엔 이걸 못 찾아 일반 뉴트럴 텍스트 톤을 대신 썼는데
   너무 진해 보인다는 지적으로 진짜 토큰으로 바꿈(26.08.28 재정정). */
.px-pro.is-owned { color: var(--mds-c-thumbnailbadge-color-contents-icon-premiumsilver); }

/* 구좌 A. `.pdf-card`(아이콘+제목+설명 3줄 카드) 대신 `.pt-upload`(요소 업로드)와 같은
   패턴의 세컨더리 버튼 한 줄로 바꿨다(26.08.28 재정정) — PDF+PPTX 합친 설명문이 길어져
   3줄로 넘치며 왕관·화살표 위치가 다 틀어졌던 카드보다 훨씬 단순하고 안 깨진다. */
.px-import-btn {
  width: 100%;
  /* `요소 업로드` 와 같은 높이여야 한 쌍으로 읽힌다. `.btn` 기본값은 이보다 얇다. */
  height: calc(var(--mds-c-button-size-container-m) * 1px);
  border-radius: calc(var(--mds-c-button-radius-square-m) * 1px);
  /* 위 여백은 이미 머리 부분 흐름에서 12 가 붙는다. 여기서 더 주면 벌어진다. */
  margin-top: 0;
}

/* 업로드 패널 머리 부분. 킷 원본이 칩 사이 여백 0 · 모서리 8 이라 칩이 서로 붙고
   각져 보였다. 실서버는 알약 모양에 회색 배경이다(26.08.28 확인). 킷 파일은
   다른 화면도 같이 쓰므로 이 패널 안에서만 덮는다. */
.panel[data-panel="업로드"] .pt-uprow {
  gap: calc(var(--mds-b-spacing-40) * 1px);
}
.panel[data-panel="업로드"] .pt-upmore {
  background: var(--mds-s-color-neutral-background-sunken);
  color: var(--mds-s-color-neutral-contents-sub);
}
.panel[data-panel="업로드"] .pt-upmore:hover {
  background: var(--mds-s-color-neutral-surface-light);
}
.panel[data-panel="업로드"] .pt-chips {
  gap: calc(var(--mds-b-spacing-40) * 1px);
  margin-top: calc(var(--mds-b-spacing-60) * 1px);
}
.panel[data-panel="업로드"] .pt-chips .chip {
  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);
  border: calc(var(--mds-b-borderwidth-10) * 1px) solid transparent;
}
.panel[data-panel="업로드"] .pt-chips .chip:hover {
  background: var(--mds-s-color-neutral-surface-light);
}
.panel[data-panel="업로드"] .pt-chips .chip.is-on {
  background: var(--mds-s-color-brand-primary-background);
  border-color: var(--mds-s-color-brand-primary-light);
  color: var(--mds-s-color-brand-primary-accessible);
}

/* ---------- 고지: 소식팝업 ---------- */
/* 규격 출처: 사내 Figma 「Popup.소식 팝업_2023q4」(데스크탑, node 823:8670 · 2150:762)
   「Popup.소식팝업(mobile)」(node 859:3450 · 148:3363), 2026-08-28 재확인.
   데스크탑은 좌 텍스트(400) + 우 이미지(560, 정사각) 가로 배치, 모바일은 위 이미지 + 아래 텍스트
   바텀시트로 뒤집힌다. 소식이 1건뿐이라(HANDOFF 결정 4·5) 컴포넌트의 여러 장 순환(rolling)은 붙이지 않는다. */
#px-news {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--mds-b-spacing-70) * 1px);
  background: var(--mds-c-dimmed-color-background-neutral-medium);
}
.px-news-box {
  position: relative; display: flex; width: min(960px, 100%);
  /* 높이를 텍스트 길이에 맡기면(auto) 이미지 칸이 옆으로 퍼진 띠 모양이 된다.
     스펙(960×560)대로 높이를 고정해야 우측 이미지가 정사각으로 보인다. */
  height: min(560px, calc(100vh - var(--mds-b-spacing-120) * 1px));
  max-height: calc(100vh - var(--mds-b-spacing-120) * 1px); overflow: auto;
  /* radius·그림자 실측(2026-08-29, 데스크톱 앱 get_design_context, node 3245:4791
     updateModal). 변수 목록에 radius·그림자 키가 없다 — 이 팝업 파일 자체가 리터럴 값을
     쓰고 있어(24px는 b/radius 스케일에 없는 값) mds-new-spec으로 둔다. */
  border-radius: 24px; /* mds-new-spec: b/radius 스케일에 24 없음, 실측 리터럴 */
  background: var(--mds-s-color-neutral-background-default);
  box-shadow: 0px 16px 24px 0px rgba(0,0,0,0.08); /* mds-new-spec: 기존 shadow 토큰 어느 것과도 불일치, 실측 리터럴 */
}
/* 닫기 버튼 실측(2026-08-29, node 3245:4802 p-mds-iconButton, 데스크톱 앱 get_design_context):
   36×36, radius 8(=--mds-c-iconbutton-radius-square-s), 배경 rgba(90,97,114,.05).
   2026-08-30 정정: Figma REST API로 같은 팝업 노드(3245:4791)를 직접 재조회해
   토큰 이름까지 확정함(get_variable_defs, mds/tokens 로컬 export 아님 — 라이브 조회) —
     c/iconButton/color/contents/neutralLight/fillLight/default = #5A6172
     c/iconButton/color/background/neutralLight/fillLight/default = #5A6172
   배경의 5% 는 이 background 변수를 그대로 쓰지 않고 레이어 투명도로 얹은 것으로 보임
   (Figma가 변수 원값만 주고 레이어 투명도는 별도라 API로는 5%를 직접 못 읽음, 스크린샷
   실측값 rgba(.,.,.,.05) 유지). 두 토큰 다 mds/tokens 로컬 export에는 아직 없다(지금은
   ghost 계열만 있음) — 이름·값 확정된 상태로 mds 프로젝트 재추출 시 그대로 추가하면 됨.
   이전에 썼던 흰 원형·24px·black-ghost는 전부 추정치였고 틀렸다. */
.px-news-x {
  position: absolute; top: calc(var(--mds-b-spacing-80) * 1px); right: calc(var(--mds-b-spacing-80) * 1px);
  z-index: 1; cursor: pointer; border: 0; border-radius: calc(var(--mds-c-iconbutton-radius-square-s) * 1px);
  display: flex; align-items: center; justify-content: center;
  background: rgba(90,97,114,.05); /* mds-new-spec: c/iconButton/color/background/neutralLight/fillLight/default(#5A6172) 5%, 로컬 미추출(2026-08-30 Figma API로 이름·값 확정) */
  color: #5A6172; /* mds-new-spec: c/iconButton/color/contents/neutralLight/fillLight/default, 로컬 미추출(2026-08-30 Figma API로 이름·값 확정) */
  width: 36px; height: 36px; /* mds-new-spec: iconButton 사이즈 스케일에 36 없음(xxs24/xs28/s32), 실측값 */
}

/* 그래픽: PPTX 파일 아이콘이 편집기 화면 안에서 색상·폰트·사진 요소로 둘러싸인 한 장면. 캡션 없이 그림만으로 읽히게 함.
   스펙은 텍스트 400 : 이미지 560 비율(전체 960)이다. 텍스트보다 이미지 칸이 더 넓다. */
.px-news-art { order: 2; flex: 0 0 min(560px, 58%); align-self: stretch; }
.px-news-art-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.px-news-body {
  order: 1; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  /* 상/좌/우 40, 하 24로 비대칭이다(2026-08-29 데스크톱 앱 실측, node 3245:4792
     contents area: pt-40 px-40 pb-24). 이전엔 네 변을 전부 24로 균일하게 썼음. */
  padding: calc(var(--mds-b-spacing-110) * 1px) calc(var(--mds-b-spacing-110) * 1px)
    calc(var(--mds-b-spacing-90) * 1px);
}
.px-news-tag {
  /* 실컴포넌트(updatePopupSubTitle, node 856:7734) 실측: 브랜드색 아니고 무채색, semiBold 14px */
  font: var(--mds-s-typography-body-stronger-m); color: var(--mds-s-color-neutral-contents-additional);
  /* 태그<->제목 16px(사용자 실측 지정) */
  margin-bottom: calc(var(--mds-b-spacing-70) * 1px);
}
.px-news-body h3 {
  /* 브라우저 기본 h3 마진(1em, 이 폰트 크기에서 28px 위아래)이 지정한 간격 위에 그대로 얹혀서
     16px·8px를 지켜도 실제로는 44px·36px로 보이던 원인이었다(2026-08-28 발견). 0으로 죽인다. */
  margin: 0;
  display: flex; align-items: center; gap: calc(var(--mds-b-spacing-20) * 1px);
  /* 실측 title/2XL(28px). title/M(18px)로 썼던 건 추정치였다 */
  font: var(--mds-s-typography-title-2xl); color: var(--mds-s-color-neutral-contents-default);
}
.px-news-pro { display: inline-flex; position: relative; }
.px-news-body > p {
  /* p 기본 마진(1em)도 같은 이유로 죽인다. 제목<->본문 8px·본문<->보조버튼 24px는
     margin-top(이 규칙)·.px-news-link의 margin-top만으로 정해진다. */
  margin: 0;
  margin-top: calc(var(--mds-b-spacing-40) * 1px);
  /* 실측 body/L(16px) */
  font: var(--mds-s-typography-body-l); color: var(--mds-s-color-neutral-contents-sub);
}
/* 보조 pill 링크(updatePopup_header 내부, node 856:7772 "지금 시작하기"). PPTX 임포트는
   강제 기능이 아니라 실제 기능 진입은 여기로 내리고, 하단 풀폭 버튼은 중립 "확인"으로 둔다
   (2026-08-28, 사용자 지시). 본문<->이 버튼 24px. */
.px-news-link {
  display: inline-flex; align-items: center; gap: calc(var(--mds-b-spacing-20) * 1px);
  align-self: flex-start; margin-top: calc(var(--mds-b-spacing-90) * 1px);
  padding: calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-40) * 1px)
    calc(var(--mds-b-spacing-50) * 1px) calc(var(--mds-b-spacing-60) * 1px);
  border: 0; border-radius: calc(var(--mds-b-radius-pill) * 1px); cursor: pointer;
  background: var(--mds-c-commonbutton-color-background-primary-filllight-default);
  color: var(--mds-c-commonbutton-color-contents-primary-filllight-default);
  font: var(--mds-c-commonbutton-typography-s);
}
.px-news-link svg { flex: none; }
.px-news-link:hover { background: var(--mds-s-color-brand-primary-surface); }
/* 실컴포넌트(updatePopup_bottom_rolling, node 2876:16300): 가로 나열이 아니라 세로 쌓기다.
   확인은 풀폭으로 위, "다음에 볼게요"는 그 아래 텍스트만 오른쪽 정렬로 붙는다(items:flex-end).
   모바일 바텀시트(148:3363)만 예외로 가로 배치라 아래 미디어쿼리에서 되돌린다. */
.px-news-foot {
  display: flex; flex-direction: column; align-items: flex-end;
  /* 확인<->다음에 볼게요 16px(사용자 실측 지정) */
  gap: calc(var(--mds-b-spacing-70) * 1px);
  margin-top: auto; padding-top: calc(var(--mds-b-spacing-80) * 1px);
}
.px-news-cta {
  order: 1; width: 100%; cursor: pointer;
  /* 실측(2026-08-29, node 3245:4791 하위 mds-commonButton): 높이 40·radius 8은 L(48/10)이
     아니라 M 사이즈다. 이전엔 L로 잘못 골라 실제보다 8px 더 크고 더 둥글게 나왔었다. */
  min-height: calc(var(--mds-c-button-size-container-m) * 1px);
  border: 0; border-radius: calc(var(--mds-c-button-radius-square-m) * 1px);
  background: var(--mds-s-color-brand-primary-default);
  color: var(--mds-s-color-neutral-static-white-default);
  font: var(--mds-s-typography-label-medium-m);
}
.px-news-cta:hover { background: var(--mds-s-color-brand-primary-accessible); }
.px-news-later {
  order: 2; cursor: pointer;
  padding: calc(var(--mds-b-spacing-20) * 1px) calc(var(--mds-b-spacing-30) * 1px);
  border: 0; background: none;
  color: var(--mds-s-color-neutral-contents-sub);
  font: var(--mds-s-typography-label-medium-m);
}
.px-news-later:hover { color: var(--mds-s-color-neutral-contents-default); }
.px-news-cta:focus-visible, .px-news-later:focus-visible, .px-news-x: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);
}
/* 모바일: 바텀시트. 세로로 뒤집어 위에 이미지, 아래에 텍스트(Figma mobile 148:3363). */
@media (max-width: 768px) {
  #px-news { align-items: flex-end; padding: 0; }
  .px-news-box {
    flex-direction: column; width: 100%; max-width: none; height: auto;
    max-height: calc(100vh - var(--mds-b-spacing-100) * 1px);
    border-radius: calc(var(--mds-b-radius-60) * 1px) calc(var(--mds-b-radius-60) * 1px) 0 0;
  }
  .px-news-art { order: 0; flex: none; width: 100%; height: 200px; }
  /* 모바일 바텀시트(148:3363)는 데스크탑과 달리 가로 배치다: 닫기(텍스트)+CTA(채움) 한 줄 */
  .px-news-foot { flex-direction: row; align-items: center; }
  .px-news-later { order: 1; }
  .px-news-cta { order: 2; width: auto; flex: 1; }
  .px-news-body {
    order: 1;
    padding: calc(var(--mds-b-spacing-80) * 1px) calc(var(--mds-b-spacing-70) * 1px)
      calc(var(--mds-b-spacing-80) * 1px + env(safe-area-inset-bottom));
  }
}

/* 구좌 D(워크스페이스) 규칙은 삭제했다(2026-08-26). 인라인 목업 대신 workspace.html
   이 실측 규격으로 그 화면을 그린다. 두 벌을 따로 관리하지 않는다. */

/* ── 진입점 통합 (설계 1장 · 3-1) ─────────────────────────
   버튼 라벨이 `파일 업로드` 로 합쳐졌으니 어떤 형식을 받는지는 보조 문구가 알린다.
   라벨 아래 한 줄로 붙어 버튼 폭을 늘리지 않는다. */
.px-subfmt {
  display: block;
  margin-top: calc(var(--mds-b-spacing-10) * 1px);
  color: var(--mds-s-color-neutral-contents-additional);
  font: var(--mds-s-typography-body-default-xs);
}
/* 채워진 버튼 위에서는 대비가 뒤집힌다. 흰 글자에 맞춰 밝은 쪽을 쓴다. */
.btn-filled .px-subfmt { color: var(--mds-s-color-neutral-static-white-default); opacity: 0.75; } /* mds-new-spec: b/opacity 스케일(.7/.8)에 없는 중간값, 실측 */
/* 킷이 768 이하에서 버튼 라벨(.lbl)을 숨긴다. 보조 문구만 남으면 버튼이 `PDF · PPTX` 로만 읽혀
   무엇을 하는 버튼인지 사라진다. 라벨과 같이 숨긴다. */
@media (max-width: 768px) {
  .btn-filled .px-subfmt { display: none; }
}

/* "워크스페이스로 이동하기" 행. 실서버 DOM 실측(2026-08-29): 테두리 없음, 배경은
   brand-primary-surface(연한 채움) · 글자·아이콘은 brand-primary-accessible. 이전엔
   진한 채움+테두리로 잘못 만들었다가, 그 다음엔 반대로 테두리만 넣는 것으로 잘못 고쳤음 —
   실서버 getComputedStyle 값을 직접 재서 바로잡음(border-width 0px 확인됨). 아이콘+문구는
   하나의 묶음으로 가운데 정렬한다(다른 dd-item 행과 달리 라벨을 늘려 왼쪽 정렬하지 않음). */
.dd-item.is-accent {
  background: var(--mds-s-color-brand-primary-surface);
  border: none;
  color: var(--mds-s-color-brand-primary-accessible);
  justify-content: center;
}
.dd-item.is-accent .mi { color: var(--mds-s-color-brand-primary-accessible); }
.dd-item.is-accent .lb { flex: none; }

/* 구좌 F. 디자인 시작 모달. 실서버 DOM 실측값(26.08.28, 1280·1920 두 뷰포트 교차검증).
   모달 1080x800 고정, 좌측 컬럼은 space-between 으로 파일 업로드를 바닥에 붙인다. */
.px-modal.px-modal-wide {
  width: 1080px; max-width: calc(100vw - var(--mds-b-spacing-100) * 1px);
  height: 800px; max-height: calc(100vh - var(--mds-b-spacing-100) * 1px);
  padding: calc(var(--mds-b-spacing-110) * 1px) calc(var(--mds-b-spacing-110) * 1px) 0;
  display: flex; flex-direction: column;
  gap: calc(var(--mds-b-spacing-60) * 1px);
}
.px-smhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--mds-b-spacing-40) * 1px);
}
.px-modal-wide h4 { margin: 0; font: var(--mds-s-typography-title-l); }
.px-smx {
  flex: 0 0 auto;
  width: calc(var(--mds-c-button-size-container-m) * 1px);
  height: calc(var(--mds-c-button-size-container-m) * 1px);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer;
  border-radius: calc(var(--mds-b-radius-30) * 1px);
  color: var(--mds-s-color-neutral-contents-default);
}
.px-smx:hover { background: var(--mds-s-color-neutral-background-sunken); }

/* 검색바. 실서버 높이 48, radius 10, 테두리만 있는 투명 배경. */
.px-smsearch {
  flex: 0 0 auto;
  display: flex; align-items: center;
  gap: calc(var(--mds-b-spacing-30) * 1px);
  height: calc(var(--mds-c-button-size-container-l) * 1px);
  padding: 0 calc(var(--mds-b-spacing-50) * 1px);
  border: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-default);
  border-radius: calc(var(--mds-b-radius-50) * 1px);
  color: var(--mds-s-color-neutral-contents-sub);
}
.px-smsearch input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; cursor: pointer;
  color: var(--mds-s-color-neutral-contents-default);
  font: var(--mds-s-typography-body-m);
}
.px-smsearch input::placeholder { color: var(--mds-s-color-neutral-contents-sub); }

.px-smbody {
  flex: 1; min-height: 0;
  display: flex;
}

/* 좌측 컬럼. space-between + 아래 패딩이 하단 두 줄을 바닥에 붙인다. */
.px-smnav {
  flex: 0 0 237px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-bottom: calc(var(--mds-b-spacing-80) * 1px);
}
.px-smnavtop, .px-smnavbottom {
  display: flex; flex-direction: column;
  gap: calc(var(--mds-b-spacing-20) * 1px);
}
.px-smnavrow {
  display: flex; align-items: center;
  gap: calc(var(--mds-b-spacing-40) * 1px);
  width: 224px; height: calc(var(--mds-c-button-size-container-l) * 1px);
  padding: calc(var(--mds-b-spacing-40) * 1px);
  border: 0; border-radius: calc(var(--mds-b-radius-40) * 1px);
  background: none; cursor: pointer; text-align: left;
  color: var(--mds-s-color-neutral-contents-default);
  font: var(--mds-s-typography-body-m);
}
/* 하단 두 줄은 실서버에서 폭·패딩·radius 가 상단과 다르다. */
.px-smnavrow.is-wide {
  width: 100%;
  padding: calc(var(--mds-b-spacing-40) * 1px) calc(var(--mds-b-spacing-60) * 1px);
  border-radius: calc(var(--mds-b-radius-50) * 1px);
}
.px-smnavrow:hover { background: var(--mds-s-color-neutral-background-sunken); }
.px-smnavrow.is-on,
.px-smnavrow.is-target {
  background: var(--mds-s-color-brand-primary-background);
  color: var(--mds-s-color-brand-primary-accessible);
  font: var(--mds-s-typography-body-strong-m);
}
.px-smnavicon { flex: 0 0 auto; }
.px-smnavrow .px-grow { flex: 1; min-width: 0; }
.px-smnavchev { flex: 0 0 auto; color: var(--mds-s-color-neutral-contents-sub); }
.px-smnavrow .px-pro { flex: 0 0 auto; margin-left: auto; }
/* 구좌 F 파일 가져오기 행만 두 줄이다(Figma `98:16527` 26.09.02 재실측) — 이 행만 높이를
   풀고 .px-grow 를 세로로 쌓는다. 부제(px-smfilesub)는 카드 부제(.px-smcsize)와 같은 토큰 짝. */
.px-smnavrow.px-smfilerow { height: auto; }
.px-smfiletext { display: flex; flex-direction: column; gap: calc(var(--mds-b-spacing-10) * 1px); }
.px-smfilesub {
  font: var(--mds-s-typography-body-default-xs);
  color: var(--mds-s-color-neutral-contents-sub);
}
.px-smnavrow:focus-visible,
.px-smchip:focus-visible,
.px-smcard:focus-visible,
.px-smmore:focus-visible,
.px-smx: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);
}

/* 우측 본문 */
.px-smmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.px-smchips {
  flex: 0 0 auto;
  padding: 0 calc(var(--mds-b-spacing-70) * 1px);
  display: flex; flex-wrap: nowrap; overflow-x: auto;
  gap: calc(var(--mds-b-spacing-30) * 1px);
  margin-bottom: calc(var(--mds-b-spacing-60) * 1px);
}
.px-smchip {
  flex: 0 0 auto; white-space: nowrap;
  height: calc(var(--mds-c-button-size-container-m) * 1px);
  /* 실서버 8px 16px. 좌우가 좁으면 두 글자짜리 `전체`가 알약이 아니라 동그라미가 된다. */
  padding: 0 calc(var(--mds-b-spacing-70) * 1px);
  border: 0; border-radius: calc(var(--mds-b-radius-pill) * 1px);
  background: none; cursor: pointer;
  color: var(--mds-s-color-neutral-contents-sub);
  font: var(--mds-s-typography-body-s);
}
.px-smchip:hover { background: var(--mds-s-color-neutral-background-sunken); }
.px-smchip.is-on {
  background: var(--mds-s-color-brand-primary-default);
  color: var(--mds-s-color-neutral-contents-inverse-default);
  font: var(--mds-s-typography-body-strong-s);
}
.px-smscroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 calc(var(--mds-b-spacing-70) * 1px);
  /* 실서버는 얇은 커스텀 스크롤바라 기본 스크롤바만큼 폭을 먹지 않는다. */
  scrollbar-width: thin;
  scrollbar-color: var(--mds-c-scrollview-color-background-thumb) transparent;
}
.px-smsec { position: relative; margin-bottom: calc(var(--mds-b-spacing-90) * 1px); }
.px-smsectitle {
  margin: 0 0 calc(var(--mds-b-spacing-40) * 1px);
  font: var(--mds-s-typography-body-strong-m);
  color: var(--mds-s-color-neutral-contents-default);
}
.px-smcards { display: flex; gap: calc(var(--mds-b-spacing-60) * 1px); overflow: hidden; }

/* 카드. 실서버 140x140 고정. */
.px-smcard {
  flex: 0 0 140px; width: 140px; height: 140px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: calc(var(--mds-b-spacing-20) * 1px);
  padding: 0 calc(var(--mds-b-spacing-60) * 1px);
  border: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-s-color-neutral-border-light);
  border-radius: calc(var(--mds-b-radius-60) * 1px);
  background: var(--mds-s-color-neutral-background-sunken);
  cursor: pointer; text-align: center;
}
.px-smcard:hover { border-color: var(--mds-s-color-brand-primary-default); }
.px-smthumb { display: block; margin-bottom: calc(var(--mds-b-spacing-20) * 1px); }
.px-smcname {
  font: var(--mds-s-typography-body-s);
  color: var(--mds-s-color-neutral-contents-default);
}
.px-smcsize {
  font: var(--mds-s-typography-body-default-xs);
  color: var(--mds-s-color-neutral-contents-sub);
}
.px-smmore {
  position: absolute; right: 0; bottom: 46px;
  width: calc(var(--mds-c-button-size-container-m) * 1px);
  height: calc(var(--mds-c-button-size-container-m) * 1px);
  display: flex; align-items: center; justify-content: center;
  border: calc(var(--mds-b-borderwidth-10) * 1px) solid var(--mds-c-elevatediconbutton-color-border-neutral-onlyhover-default);
  border-radius: calc(var(--mds-b-radius-pill) * 1px); cursor: pointer;
  background: var(--mds-c-elevatediconbutton-color-background-neutral-default);
  box-shadow: var(--mds-c-elevatediconbutton-shadow-2xl);
  color: var(--mds-c-elevatediconbutton-color-contents-icon-neutral-default);
}
.px-smmore:hover { background: var(--mds-s-color-neutral-background-sunken); }

@media (max-width: 768px) {
  .px-modal.px-modal-wide { width: calc(100vw - var(--mds-b-spacing-90) * 1px); height: calc(100vh - var(--mds-b-spacing-90) * 1px); padding: calc(var(--mds-b-spacing-60) * 1px) calc(var(--mds-b-spacing-60) * 1px) 0; }
  .px-smbody { flex-direction: column; gap: calc(var(--mds-b-spacing-50) * 1px); }
  .px-smnav { flex: 0 0 auto; padding-bottom: 0; }
  .px-smnavrow { width: 100%; }
}