/* 독립 업스케일 도구(#/upscale · web/stages/upscaleTool.js) — Framer 다크. 흰 알약은 [업스케일] 하나(.btn--primary).
 *   위: 작업대(왼쪽 큰 무대 = 놓는 칸 / 고른 영상 미리보기 · 오른쪽 판 = 화풍 타일 두 개 + [업스케일]) ·
 *   아래: 최근 30일 결과 격자(타일 = 결과 영상 첫 프레임 · 올리면 재생 · 이름·화풍·시각 · [다운로드]).
 *   좁은 폭에서는 작업대가 위아래로 접히고 격자 칸이 줄어든다. */
body.shell-v2 .ups-wrap {
  max-width: 1120px; margin: 0 auto; padding: var(--sp-xl) var(--page-gutter) var(--sp-section);
  display: grid; gap: var(--sp-xl);
}
body.shell-v2 .ups-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-md); }
body.shell-v2 .ups-title { margin: 0; font-size: var(--fs-title-1); line-height: var(--lh-title-1); font-weight: 600; color: var(--ink); }

/* 작업대 */
body.shell-v2 .ups-composer {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-md);
  padding: var(--sp-md); border-radius: var(--r-xxl, 24px); background: var(--surface-1);
  border: 1px solid var(--hairline-soft);
}

/* 무대 — 라벨 하나가 클릭·끌어 놓기 과녁(입력은 투명하게 덮는다) */
body.shell-v2 .ups-stage {
  position: relative; display: grid; place-items: center; min-height: 380px; aspect-ratio: 16 / 9;
  border-radius: var(--r-xl, 18px); overflow: hidden; cursor: pointer; isolation: isolate;
  background:
    radial-gradient(60% 80% at 20% 10%, color-mix(in srgb, #6a4cf5 22%, transparent), transparent 70%),
    radial-gradient(50% 70% at 85% 90%, color-mix(in srgb, #d44df0 16%, transparent), transparent 70%),
    var(--surface-2);
  border: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent);
  transition: border-color .15s ease, background-color .15s ease;
}
body.shell-v2 .ups-stage:hover, body.shell-v2 .ups-stage.is-over { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
body.shell-v2 .ups-stage.is-over { background-color: var(--surface-3, #242424); }
body.shell-v2 .ups-stage:focus-within { box-shadow: var(--ring-focus, 0 0 0 2px var(--accent)); }
body.shell-v2 .ups-stage.has-file { border-style: solid; border-color: var(--hairline); background: #000; }
body.shell-v2 .ups-drop-input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
body.shell-v2 .ups-stage-empty { display: grid; justify-items: center; gap: 10px; padding: var(--sp-lg); text-align: center; pointer-events: none; }
body.shell-v2 .ups-stage-ico {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink);
}
body.shell-v2 .ups-stage-title { font-size: var(--fs-title-3); font-weight: 500; color: var(--ink); }
body.shell-v2 .ups-stage-hint { font-size: var(--fs-caption); color: var(--ink-48); }
body.shell-v2 .ups-stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
body.shell-v2 .ups-stage-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-md); padding: 40px var(--sp-md) var(--sp-md);
  background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent); pointer-events: none;
}
body.shell-v2 .ups-stage-file { display: grid; gap: 2px; min-width: 0; }
body.shell-v2 .ups-stage-name { font-size: var(--fs-body); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .ups-stage-meta { font-size: var(--fs-fine); color: rgba(255, 255, 255, .64); font-variant-numeric: tabular-nums; }
body.shell-v2 .ups-stage-swap {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: var(--r-pill, 999px);
  font-size: var(--fs-fine); color: #fff; background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px);
}

/* 오른쪽 판 */
body.shell-v2 .ups-panel { display: flex; flex-direction: column; gap: 10px; padding: var(--sp-sm) var(--sp-xs); min-width: 0; }
body.shell-v2 .ups-panel-label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-80, var(--ink)); }
body.shell-v2 .ups-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.shell-v2 .ups-style {
  position: relative; display: grid; justify-items: start; gap: 22px; padding: 14px; min-height: 104px;
  border-radius: var(--r-lg, 14px); border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-80, var(--ink));
  font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
body.shell-v2 .ups-style:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ink) 30%, transparent); color: var(--ink); }
body.shell-v2 .ups-style:focus-visible { outline: none; box-shadow: var(--ring-focus, 0 0 0 2px var(--accent)); }
body.shell-v2 .ups-style:disabled { opacity: .5; cursor: default; }
body.shell-v2 .ups-style.is-on { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, var(--surface-2)); color: var(--ink); }
body.shell-v2 .ups-style-ico {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
body.shell-v2 .ups-style-label { font-size: var(--fs-body); font-weight: 600; }
body.shell-v2 .ups-style-check {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--hairline); color: transparent;
}
body.shell-v2 .ups-style.is-on .ups-style-check { background: var(--ink); border-color: var(--ink); color: var(--canvas, #000); }
body.shell-v2 .ups-panel-spacer { flex: 1; min-height: var(--sp-md); }
body.shell-v2 .ups-go { width: 100%; justify-content: center; min-height: 52px; }
body.shell-v2 .ups-error { margin: 0; font-size: var(--fs-caption); color: var(--danger); }

/* 최근 30일 */
body.shell-v2 .ups-history { display: grid; gap: var(--sp-md); }
body.shell-v2 .ups-history-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--sp-md); }
body.shell-v2 .ups-history-title { margin: 0; font-size: var(--fs-title-3); font-weight: 600; color: var(--ink); }
body.shell-v2 .ups-history-note { margin: 0; font-size: var(--fs-caption); color: var(--ink-48); }
body.shell-v2 .ups-empty {
  margin: 0; padding: var(--sp-xl) var(--sp-md); border-radius: var(--r-xl, 18px); border: 1px dashed var(--hairline);
  text-align: center; font-size: var(--fs-caption); color: var(--ink-48);
}
body.shell-v2 .ups-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-md); }
body.shell-v2 .ups-tile { display: grid; gap: 10px; min-width: 0; }
body.shell-v2 .ups-tile-media {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg, 14px); overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--hairline-soft);
}
body.shell-v2 .ups-tile-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
body.shell-v2 .ups-tile-ph {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px;
  color: var(--ink-48); font-size: var(--fs-fine);
}
body.shell-v2 .ups-tile.is-failed .ups-tile-ph { color: var(--danger); }
body.shell-v2 .ups-tile-badge {
  position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: var(--r-pill, 999px);
  font-size: 11px; color: #fff; background: rgba(0, 0, 0, .56); backdrop-filter: blur(6px); font-variant-numeric: tabular-nums;
}
body.shell-v2 .ups-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); min-width: 0; }
body.shell-v2 .ups-tile-main { display: grid; gap: 2px; min-width: 0; }
body.shell-v2 .ups-tile-name { font-size: var(--fs-caption); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .ups-tile-meta { font-size: var(--fs-fine); color: var(--ink-48); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .ups-tile-foot .btn { flex: none; }
body.shell-v2 .ups-spin {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-48); border-top-color: transparent;
  animation: ups-spin 0.9s linear infinite;
}
@keyframes ups-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.shell-v2 .ups-spin { animation: none; } }
@media (max-width: 860px) {
  body.shell-v2 .ups-composer { grid-template-columns: 1fr; }
  body.shell-v2 .ups-stage { min-height: 220px; }
  body.shell-v2 .ups-panel-spacer { display: none; }
}