/* static/css/download.css — 데스크톱 앱 소개 페이지
 * 기존 사이트 디자인 언어(파스텔 글래스·오로라 히어로·tokens.css)를 그대로 쓴다.
 * 이 페이지는 브라우저에서 실행할 수 없는 데스크톱 앱을 소개하므로, 예외적으로
 * 실제 앱 화면과 짧은 설명을 둔다(사용자 지정 — 브랜딩 목적).
 */

/* ── 히어로 ─────────────────────────────────────────────────────────────── */
.dl-hero { padding-bottom: 64px; }
.dl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 56px;
  align-items: center;
  text-align: left;
}
/* 컨테이너 왼쪽 패딩만으로는 히어로 카피가 화면 가장자리에 붙어 보인다(넓은 모니터일수록
   두드러짐) — 옆의 영상이 자체 여백을 갖고 떠 있는 것과 균형을 맞추도록 살짝 밀어낸다. */
.dl-hero-copy { padding-left: clamp(0px, 4vw, 56px); }
.dl-hero-title { margin-bottom: 22px; }
.dl-hero-sub { margin: 0 0 32px; max-width: 30em; }

.dl-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dl-btn { gap: 9px; box-shadow: 0 6px 18px rgba(20, 27, 40, 0.18); }
.dl-btn svg { display: block; }
.dl-cta-meta { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

/* ── 우클릭 데모 영상 ───────────────────────────────────────────────────── */
/* 실제 탐색기 화면을 녹화한 두 영상(확장자 변환 클릭 / 파일 용량 줄이기 클릭)이
   download.js가 재생 종료마다 서로 바꿔 끼우며 번갈아 돈다.

   ★ 이 영상을 카드에 담지 않는다(사용자 지정) — 액자·테두리·그림자를 두면 "웹페이지에
   붙인 스크린샷"으로 읽힌다. 대신 두 가지로 배경에 녹인다.
   ① 부분 자르기 — 원본 900×654에서 위쪽 툴바 조각과 아래쪽 빈 여백을 잘라내고, 파일
      아이콘과 우클릭 메뉴만 남는 구간을 확대해 채운다(프레임 밖은 overflow로 잘린다).
   ② 가장자리 용해 — 사방을 마스크로 흐려 프레임의 네 변이 어디서 끝나는지 보이지 않게
      한다. 영상 바탕이 흰색이고 페이지 배경이 종이색이라, 경계만 지우면 그대로 이어진다.
   깊이감은 뒤에 까는 글로우가 아니라 이 연속성 자체로 낸다. */
.dl-hero-visual { position: relative; z-index: 1; display: flex; justify-content: center; }
.dl-video-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 852 / 596;
  overflow: hidden;
  /* 아래 .dl-video가 multiply로 얹히는 바탕. 이 자리(히어로 우측)의 종이 농도와 같은
     값이라, 영상의 흰 바탕이 곱해지면 페이지 배경과 구별되지 않는다 — 남는 것은 파일
     아이콘과 메뉴의 잉크뿐이다. mask가 이 요소에 걸려 있어 합성 맥락이 여기서 닫히므로
     블렌드 대상은 항상 이 바탕이 된다(뒤쪽 페이지 배경으로 새지 않는다). */
  background: #f4f6fb;
  /* 좌우·상하 두 겹을 교차(intersect)시켜 네 변을 모두 페이드시킨다. 아래·왼쪽은 원본에서
     빈 흰 면이 넓은 쪽이라 더 일찍 사라지게 잡았다. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 15%, #000 83%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 15%, #000 83%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.dl-video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -47%);
  mix-blend-mode: multiply;
}

/* ── 우클릭 체험 ────────────────────────────────────────────────────────── */
.dl-h2 {
  font-family: 'Plus Jakarta Sans Variable', var(--font-pretendard), var(--font-inter), sans-serif;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.dl-section-head { position: relative; z-index: 1; text-align: center; max-width: 620px; margin: 0 auto 44px; }
.dl-section-desc {
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
  text-wrap: pretty;
}

.dl-try { position: relative; padding-bottom: 96px; }

/* 폴더 창 — 스크린샷 대신 실제로 눌러 보는 자리다. 창 하나가 무대이고, 그 안에서
   파일 → 메뉴 → 팝업 → 진행 → 결과가 전부 벌어진다. 단계마다 높이가 달라지면 페이지가
   튀므로 무대 높이를 고정하고 안에서만 바뀌게 한다. 상태는 루트의 data-stage 하나가
   쥐고 있고(download.js), 아래 선택자들이 무엇을 보일지 정한다. */
.dl-demo-wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.dl-demo {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.dl-demo-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  height: 46px;
  padding: 0 8px 0 16px;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 rgba(20, 27, 40, 0.07);
}
/* 주소 표시줄 — 폴더 이름 하나만 두면 창이 아니라 카드로 읽힌다. 탐색기처럼 경로를
   셰브런으로 잇고 현재 폴더만 진하게 둔다(누르는 곳은 아니라 포인터를 끈다). */
.dl-demo-crumbs {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  font-size: 13px; color: var(--text-secondary);
  pointer-events: none;
}
.dl-demo-crumbs > svg { flex: 0 0 auto; }
.dl-demo-crumbs > svg:first-child { color: var(--accent); margin-right: 1px; }
.dl-demo-crumbs > svg:not(:first-child) { color: var(--tint-300); }
.dl-demo-crumbs span { white-space: nowrap; }
.dl-demo-crumbs .is-current { font-weight: 700; color: var(--text-primary); }

.dl-demo-restart {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px;
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}
.dl-demo-restart:hover { background: var(--tint-100); color: var(--accent); }
.dl-demo-restart[disabled] { cursor: default; color: var(--tint-300); }
.dl-demo-restart[disabled]:hover { background: transparent; color: var(--tint-300); }

.dl-demo-stage {
  position: relative;
  height: 504px;
  padding: 20px 18px;
  background: var(--tint-50);
  overflow: hidden;
}

/* ① 파일 — 탐색기 큰 아이콘 보기처럼 아이콘 아래 이름. 우클릭(또는 Ctrl·Shift 클릭으로 여러
   개)한 파일이 선택된 것으로 보인다. 23개가 6열로 쌓이면 좁은 화면에서는 한 화면에 다 안
   들어오므로, 무대 높이를 벗어나면 이 영역만 스크롤한다(무대 자체는 자르지 않는다). */
.dl-demo-desk {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  width: 100%; height: 100%;
  overflow-y: auto;
}
.dl-demo-files {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  width: 100%;
}
.dl-demo-file {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  min-width: 0; padding: 12px 6px;
  border: 0; border-radius: 10px;
  background: transparent;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  transition-property: background-color, box-shadow;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}
.dl-demo-file:hover { background: var(--tint-100); }
.dl-demo-file-icon { color: var(--accent); }
.dl-demo-file-name {
  max-width: 100%;
  font-size: 12px; font-weight: 600;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-demo-file.is-picked {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(31, 63, 107, 0.28);
}

/* ② 우클릭 메뉴 — 커서 자리(--mx/--my)를 원점으로 열린다. 여기만 사이트 토큰을 따르지 않고
   윈도우 탐색기 메뉴 규격을 그대로 쓴다(사용자 지정) — 각진 모서리, 1px 회색 테두리,
   28px 항목, 시스템 글꼴, 구분선. 몰입감의 근거가 "진짜 OS 메뉴처럼 보이는 것"이라
   여기서 브랜드 스타일을 섞으면 목적 자체가 무너진다. 나가는 전이는 들어오는 것보다 짧다. */
.dl-demo-menu {
  position: absolute;
  top: var(--my, 50%); left: var(--mx, 50%);
  z-index: 3;
  min-width: 236px;
  padding: 3px 0;
  border-radius: 4px;
  border: 1px solid #d4d4d4;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  font-family: 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', var(--font-pretendard), sans-serif;
  opacity: 0; visibility: hidden;
  transform: scale(0.96);
  transform-origin: top left;
  transition-property: opacity, transform, visibility;
  transition-duration: 110ms, 110ms, 0s;
  transition-timing-function: ease-in;
  transition-delay: 0s, 0s, 110ms;
}
.dl-demo[data-stage="menu"] .dl-demo-menu {
  opacity: 1; visibility: visible;
  transform: scale(1);
  transition-duration: 140ms, 140ms, 0s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}
.dl-demo-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 28px;
  padding: 0 12px 0 9px;
  border: 0; border-radius: 0;
  background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 400;
  color: #1a1a1a;
  text-align: left;
  cursor: pointer;
  transition: background-color 90ms ease-out;
}
.dl-demo-menu-item:hover { background: #f0f0f0; }
/* display를 지정한 요소에서는 [hidden]의 기본 display:none이 무시된다 — 압축을 지원하지
   않는 파일에서 항목을 실제로 감추려면 여기서 다시 눌러 줘야 한다. */
.dl-demo-menu-item[hidden] { display: none; }
/* 기본 항목은 그림이고 우리 두 항목만 눌린다 — 눌리지 않는 것에 커서가 바뀌면 안 된다. */
.dl-demo-menu-item.is-os { pointer-events: none; }
.dl-demo-menu-item.is-bold .dl-demo-menu-label { font-weight: 700; }
.dl-demo-menu-icon { flex: 0 0 auto; width: 16px; height: 16px; display: block; }
.dl-demo-menu-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-demo-menu-arrow { flex: 0 0 auto; display: flex; color: #6b6b6b; }
.dl-demo-menu-sep { display: block; height: 1px; margin: 3px 1px; background: #e3e3e3; }

/* ③ 팝업 — 실제로 폴더 창 위에 겹쳐 뜨는 자리라 뒤를 어둡게 덮는다(장식이 아니라 층 구분). */
.dl-demo-scrim {
  position: absolute; inset: 0; z-index: 4;
  background: rgba(20, 27, 40, 0.22);
  opacity: 0; visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: 120ms, 0s;
  transition-timing-function: ease-in;
  transition-delay: 0s, 120ms;
}
.dl-demo[data-stage*="-"] .dl-demo-scrim {
  opacity: 1; visibility: visible;
  transition-duration: 160ms, 0s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

.dl-demo-panel {
  position: absolute; z-index: 5;
  top: 50%; left: 50%;
  /* 실제 앱 변환 창(480×554)의 비율에 맞춘 높이 — 바꿀 수 있는 형식이 가장 많은 이미지
     파일에서 타일 세 줄이 잘리지 않고 다 들어가는 값이다(실측). */
  width: min(372px, calc(100% - 44px));
  height: 452px;
  display: flex; flex-direction: column;
  border-radius: 16px;
  background: var(--tint-100);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, calc(-50% + 10px)) scale(0.98);
  transition-property: opacity, transform, visibility;
  transition-duration: 120ms, 120ms, 0s;
  transition-timing-function: ease-in;
  transition-delay: 0s, 0s, 120ms;
}
.dl-demo[data-stage^="convert"] .dl-demo-panel[data-panel="convert"],
.dl-demo[data-stage^="compress"] .dl-demo-panel[data-panel="compress"] {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-duration: 180ms, 180ms, 0s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s;
}

/* 실제 앱 타이틀바 그대로 — 왼쪽에 앱 로고, 그다음 제목, 오른쪽 끝에 닫기(desktop.css .tk-titlebar). */
.dl-demo-panel-bar {
  display: flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 6px 0 14px;
  flex: 0 0 auto;
}
.dl-demo-panel-brand { flex: 0 0 auto; width: 18px; height: 18px; }
.dl-demo-panel-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dl-demo-x {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--text-secondary);
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}
.dl-demo-x:hover { background: rgba(31, 63, 107, 0.10); color: var(--accent); }

.dl-demo-panel-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 12px 12px;
  overflow-y: auto;
}

/* 앱의 카드 규격(desktop.css)을 그대로 옮긴다 — 같은 화면이라는 인상이 여기서 난다. */
.dl-demo-subject {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  padding: 10px; border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
/* 썸네일은 대상 파일 종류를 따른다 — 아이콘 다섯을 미리 넣어 두고 data-kind로 하나만 보인다
   (JS가 SVG를 조립하지 않아도 되고, 아이콘 매크로 한 곳에서 계속 관리된다). */
.dl-demo-thumb {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--tint-100);
  color: var(--accent);
}
.dl-demo-thumb > span { display: none; }
.dl-demo-thumb[data-kind="image"] > [data-i="image"],
.dl-demo-thumb[data-kind="pdf"] > [data-i="pdf"],
.dl-demo-thumb[data-kind="audio"] > [data-i="audio"],
.dl-demo-thumb[data-kind="video"] > [data-i="video"],
.dl-demo-thumb[data-kind="document"] > [data-i="document"],
.dl-demo-thumb[data-kind="ebook"] > [data-i="ebook"],
.dl-demo-thumb[data-kind="spreadsheet"] > [data-i="spreadsheet"],
.dl-demo-thumb[data-kind="presentation"] > [data-i="presentation"],
.dl-demo-thumb[data-kind="font"] > [data-i="font"],
.dl-demo-thumb[data-kind="cad"] > [data-i="cad"] { display: flex; }
/* 여러 파일을 함께 골랐을 때는 서로 다른 종류가 섞일 수 있어 아이콘 하나로 대표할 수 없다
   — 선택한 개수를 숫자로 보여 준다(픽토그램 대신 사실 그대로). */
.dl-demo-thumb-count {
  font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.dl-demo-thumb[data-kind="multi"] > [data-i="multi"] { display: flex; }
.dl-demo-subject-text { display: block; min-width: 0; }
.dl-demo-subject-name { display: block; font-size: 13px; font-weight: 700; }
.dl-demo-subject-meta {
  display: block; font-size: 12px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.dl-demo-step { display: none; }
.dl-demo[data-stage$="-setup"] .dl-demo-step[data-step="setup"],
.dl-demo[data-stage$="-run"] .dl-demo-step[data-step="run"],
.dl-demo[data-stage$="-done"] .dl-demo-step[data-step="done"] {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto; min-height: 0;
  animation: dl-demo-step-in 160ms ease-out;
}
@keyframes dl-demo-step-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.dl-demo-label {
  margin: 0; padding-left: 2px;
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
}

/* 앱과 같이 타일 영역이 남는 높이를 흡수한다(desktop.css의 .tiles) — 그래야 저장 위치·옵션이
   창 아래에 붙고, 팝업 밑에 쓰이지 않는 빈 면이 남지 않는다. 열 수도 앱과 같은 auto-fill로
   두어, 바꿀 수 있는 형식이 몇 개든 격자가 알아서 채워진다(--tile-size 64px). */
.dl-demo-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px;
  align-content: start;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
}
/* display를 지정한 요소는 [hidden]의 기본 display:none이 같은 우선순위에서 밀린다 —
   공통 변환 형식이 없을 때 타일 그리드를 실제로 감추려면 여기서 다시 눌러 줘야 한다. */
.dl-demo-tiles[hidden] { display: none; }
/* 압축 화면은 타일이 없어 남는 높이를 흡수할 것이 필요하다. */
.dl-demo-spacer { flex: 1 1 auto; min-height: 0; }
.dl-demo-tile {
  min-height: 44px;
  border: 0; border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-family: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  cursor: pointer;
  transition-property: transform, box-shadow, color;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}
.dl-demo-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--accent); }
.dl-demo-tile:active { transform: scale(0.97); }

/* 여러 형식이 섞인 파일들을 함께 골라 공통 변환 형식이 없을 때 타일 대신 뜨는 안내 —
   옆 카드들과 같은 규격(surface·shadow-sm)을 써서 혼자 튀지 않게 한다. */
.dl-demo-empty {
  margin: 0; padding: 16px 14px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 13px; line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  text-wrap: pretty;
}

.dl-demo-estimate {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dl-demo-estimate svg { flex: 0 0 auto; color: var(--accent); }

/* 저장 위치 줄은 앱 화면의 일부로 그린 것이지 조작 대상이 아니다 — 눌러도 아무 일이
   없는 것이 클릭을 부르지 않도록 포인터 자체를 끈다. 체크박스는 실제 앱처럼 눌린다. */
.dl-demo-output { pointer-events: none; }

.dl-demo-option {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.dl-demo-box {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--tint-300);
  transition-property: background-color, box-shadow;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}
.dl-demo-option.is-checked .dl-demo-box {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.3l3 3 6-6.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.dl-demo-option-title { font-size: 13px; font-weight: 700; }
.dl-demo-option-warn {
  font-size: 12px; color: var(--text-secondary);
  transition: opacity 140ms ease-out;
}
/* 경고는 강제 압축을 켰을 때만 보인다(실제 앱과 동일 규칙) — 끈 상태에선 감춘다. */
.dl-demo-force:not(.is-checked) .dl-demo-option-warn { opacity: 0; }

.dl-demo-more-body {
  display: flex; align-items: center; gap: 12px;
  padding: 0 2px;
}
/* 이 둘은 자체 display:flex가 있어 [hidden]의 기본 display:none과 우선순위가
   같아지면 소스 순서상 이쪽이 이긴다 — hidden 속성이 실제로 감추도록 명시한다. */
.dl-demo-estimate[hidden],
.dl-demo-more-body[hidden] { display: none; }
.dl-demo-slider {
  flex: 1 1 auto;
  accent-color: var(--accent);
  cursor: pointer;
  height: 20px;
}
.dl-demo-more-target {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 78px;
  text-align: right;
}

.dl-demo-output {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.dl-demo-output > svg { flex: 0 0 auto; color: var(--accent); }
.dl-demo-output-text { display: block; min-width: 0; flex: 1 1 auto; }
.dl-demo-output-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.dl-demo-output-value {
  display: block; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dl-demo-output-actions {
  flex: 0 0 auto;
  display: flex; gap: 12px;
  font-size: 12px; color: var(--text-secondary);
}

.dl-demo-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
.dl-demo-btn {
  min-height: 36px; padding: 0 16px;
  border: 0; border-radius: 9999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition-property: transform, box-shadow, background-color, color;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}
.dl-demo-btn:hover { color: var(--accent); box-shadow: var(--shadow-md); }
.dl-demo-btn:active { transform: scale(0.98); }
.dl-demo-btn-primary { background: var(--accent); color: #fff; }
.dl-demo-btn-primary:hover { background: var(--accent-hover); color: #fff; }

.dl-demo-progress {
  height: 8px; border-radius: 9999px;
  background: rgba(31, 63, 107, 0.13);
  overflow: hidden;
}
.dl-demo-progress-fill {
  display: block; height: 100%;
  border-radius: 9999px;
  /* 같은 잉크의 명도 차이만 쓴다(앱의 진행바와 동일) */
  background: linear-gradient(90deg, var(--accent) 0%, #4a76a8 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dl-demo-progress-fill.is-full { transform: scaleX(1); }

/* 여러 파일을 함께 처리하면 결과 줄이 파일 수만큼 쌓인다 — 팝업 높이는 고정이라 목록만
   스크롤한다(패널 바디가 이미 overflow-y:auto라 이중 스크롤은 아니다, 이 컨테이너가 flex
   되며 남는 높이를 갖는다). */
.dl-demo-results {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
}
.dl-demo-result {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  padding: 11px 12px; border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.dl-demo-result-icon { flex: 0 0 auto; display: flex; color: var(--success); }
.dl-demo-result-text { display: block; min-width: 0; }
.dl-demo-result-name {
  display: block; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dl-demo-result-from { display: block; font-size: 12px; color: var(--text-secondary); }

/* ── 반응형 ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .dl-hero-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .dl-hero-copy { padding-left: 0; }
  .dl-hero-sub { margin-left: auto; margin-right: auto; }
  .dl-cta-row { justify-content: center; }
  .dl-video-frame { max-width: 440px; margin: 0 auto; }
}
@media (max-width: 639px) {
  .dl-try { padding-bottom: 64px; }
  .dl-demo-stage { height: 486px; padding: 14px; }
  .dl-demo-panel { width: calc(100% - 20px); height: 436px; }
  .dl-demo-menu { min-width: 212px; }
  .dl-demo-files { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .dl-demo-crumbs { font-size: 12px; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-demo-restart,
  .dl-demo-file,
  .dl-demo-menu,
  .dl-demo-menu-item,
  .dl-demo-scrim,
  .dl-demo-panel,
  .dl-demo-tile,
  .dl-demo-x,
  .dl-demo-btn,
  .dl-demo-progress-fill { transition: none !important; }
  .dl-demo-tile:hover,
  .dl-demo-tile:active,
  .dl-demo-btn:active { transform: none; }
  .dl-demo[data-stage$="-setup"] .dl-demo-step[data-step="setup"],
  .dl-demo[data-stage$="-run"] .dl-demo-step[data-step="run"],
  .dl-demo[data-stage$="-done"] .dl-demo-step[data-step="done"] { animation: none; }
}