/* 컷 화면 (web/cut.js) — 데스크톱은 넓은 모달, 모바일은 전체 화면 (docs/cut-editing-product-plan-2026-10-14.md §5.1·§11).
   값은 style.css 의 토큰만 쓴다 (글자 크기 계단 · 조작 높이 계단 · 색 토큰). 우선순위: 영상 → 선택 구간 → 시작·끝·길이 → 저장. */

html.cutx-open { overflow: hidden; }
.cutx-back { position: fixed; inset: 0; z-index: var(--z-sheet); background: #000b; display: flex;
  align-items: center; justify-content: center; padding: 24px; }
.cutx { position: relative; width: min(960px, 100%); max-height: calc(100vh - 48px); overflow: hidden; outline: none;
  min-height: min(760px, calc(100vh - 48px));   /* 불러오는 골격과 다 그린 화면이 같은 크기다 (A09) */
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--e-3);
  display: flex; flex-direction: column; }
/* 열림·닫힘 — 뒤가 어두워지며 상자가 살짝 떠오르고, 닫힐 때는 반대로 짧게 (A09·A11). 키프레임·길이는 다른 가운데 상자(확인 시트·소재 시트)와
   같은 것이다 — style.css 의 ui-fade/ui-pop 를 dur-2 로 (R6-15 · 예전엔 컷만 dur-3 이고 cutx-* 키프레임을 따로 들었다). 줄이기 설정이면 전역 규칙이 끈다 */
.cutx-back { animation: ui-fade-in var(--dur-2) var(--ease); }
.cutx-back .cutx { animation: ui-pop-in var(--dur-2) var(--ease); }
.cutx-back.is-leaving { animation: ui-fade-out var(--dur-2) var(--ease-exit, var(--ease)) forwards; pointer-events: none; }
.cutx-back.is-leaving .cutx { animation: ui-pop-out var(--dur-2) var(--ease-exit, var(--ease)) forwards; }
/* 골격 — 실제 화면의 자리 순서대로. 반짝임은 앱의 골격 하나(style.css .skel)다 (R6-10 · 예전엔 컷만 background-position 스윕을 따로 돌렸다) */
.cutx-skel { display: flex; flex-direction: column; gap: 10px; }
.cutx-skel i { display: block; height: 30px; width: 60%; border-radius: 8px; }
.cutx-skel .sk-stage { width: 100%; height: min(46vh, 517px); border-radius: 12px; }
.cutx-skel .sk-tl { width: 100%; height: 64px; }
.cutx-skel .sk-short { width: 36%; }
.cutx-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 8px; }
.cutx-head > div { flex: 1; min-width: 0; }
.cutx-head h2 { margin: 0; font-size: var(--t-xl); font-weight: 700; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
/* 어절 가운데서 끊지 않는다 — 390px 에서 '원/본' 으로 갈라졌다 (A30) */
.cutx-sub { margin: 4px 0 0; font-size: var(--t-sm); color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
.cutx-sub .warn { color: var(--hot); }
.cutx-tpick { margin-top: var(--sp-8); max-width: 560px; }   /* 제목 후보 넘겨 보기 (app.js titlePicker) */
.cutx-x { width: var(--ctl-lg); height: var(--ctl-lg); flex: none; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface-3); color: var(--ink-1); display: grid; place-items: center; cursor: pointer; }
.cutx-x svg { width: 16px; height: 16px; }
.cutx-rename { width: 100%; height: var(--ctl-lg); font-size: var(--t-lg); background: var(--surface-3); color: var(--ink);
  border: 1px solid var(--hot); border-radius: 6px; padding: 0 8px; }
.cutx-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 20px 12px; display: flex; flex-direction: column; gap: 10px; }
.cutx-wait { padding: 48px 0; text-align: center; color: var(--ink-2); font-size: var(--t-md); }
.cutx-banner { margin: 0; padding: 8px 12px; border-radius: 8px; font-size: var(--t-base); line-height: 1.5;
  background: var(--surface-4); color: var(--ink-1); border: 1px solid var(--line-2); }
.cutx-banner.expired, .cutx-banner.dropped { border-color: var(--hot-dim); }

.cutx-stage { position: relative; background: #000; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  aspect-ratio: var(--src-ar, 16 / 9); max-height: 46vh; margin: 0 auto; width: 100%; }
.cutx-stage video, .cutx-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 낮은 창(1280×800)에서 무대가 흐름 상자 안에서 줄어 1100×200 띠가 되고 영상 위아래가 잘렸다 (2026-10-25).
   무대는 줄지 않고(flex:none), 높이를 창 높이에서 정해 그 비율의 폭을 갖는다 — 아래 조작이 스크롤 없이 남는다 */
.cutx-stage { flex: none; --stage-h: clamp(200px, calc(100vh - 520px), 46vh);
  max-height: var(--stage-h); width: min(100%, calc(var(--stage-h) * var(--src-ar, 16 / 9))); }
.cutx-novideo, .cutx-vfail { color: var(--ink-2); font-size: var(--t-md); padding: 24px; text-align: center; }
.cutx-vfail { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; background: #000c; }
.cutx-vfail[hidden] { display: none; }

.cutx-play { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-base); }
.cutx-play .btn svg { width: 14px; height: 14px; }
.cutx-now { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; display: inline-block; min-width: 6ch; text-align: right; }  /* 재생 중 숫자 폭이 바뀌어 옆 단추가 2px 씩 흔들렸다 */
.cutx-play .muted { color: var(--ink-3); font-family: var(--mono); }
.cutx-loop { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-1); cursor: pointer; }

.cutx-overview { position: relative; height: 12px; border-radius: 6px; background: var(--surface-4); cursor: pointer; }
.cutx-overview .ov-sels { position: absolute; inset: 0; pointer-events: none; }
.cutx-overview .ov-sel { position: absolute; top: 0; bottom: 0; background: var(--hot); border-radius: 2px; opacity: .55; }
.cutx-overview .ov-sel.on { opacity: .95; }
.cutx-overview .ov-view { position: absolute; top: -3px; bottom: -3px; border: 1px solid var(--ink-2); border-radius: 4px; }
.cutx-overview .ov-head { position: absolute; top: -3px; bottom: -3px; width: 2px; transform: translateX(-50%); background: var(--ink); }

.cutx-tlrow { display: flex; align-items: center; gap: 8px; }
.cutx-tlrow > .btn { width: var(--ctl-md); padding: 0; flex: none; font-size: var(--t-lg); }
.cutx-tl { position: relative; flex: 1; height: 64px; border-radius: 8px; background: var(--surface-3);
  border: 1px solid var(--line-2); touch-action: none; user-select: none; cursor: pointer; }
.tl-ticks i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tl-ticks b { position: absolute; top: 2px; left: 4px; font: 400 var(--t-xs) var(--mono); color: var(--ink-3); white-space: nowrap; }
.tl-dim { position: absolute; top: 0; bottom: 0; background: #0008; pointer-events: none; }
.tl-dim.l { left: 0; border-radius: 8px 0 0 8px; }
.tl-dim.r { border-radius: 0 8px 8px 0; }
.tl-sels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: var(--r); }   /* 바 밖으로 안 나간다 (A02) */
.tl-sel { position: absolute; top: 0; bottom: 0; border-top: 3px solid var(--hot); border-bottom: 3px solid var(--hot);
  background: var(--hot-ghost); pointer-events: none; }
/* 여러 구간 — 고르지 않은 구간은 옅게, 번호는 늘 보인다 (색만으로 가르지 않는다) */
.tl-sel.m { opacity: .55; border-left: 1px solid var(--hot); border-right: 1px solid var(--hot); }
.tl-sel.m.on { opacity: 1; }
.tl-sel b { position: absolute; left: 3px; bottom: 3px; min-width: 16px; padding: 0 4px; border-radius: 4px; text-align: center;
  background: var(--hot); color: var(--surface-2); font: 700 var(--t-xs) var(--mono); line-height: 16px; }
.tl-dim[hidden] { display: none; }
.tl-head { position: absolute; top: -4px; bottom: -4px; width: 2px; transform: translateX(-50%); background: var(--ink); pointer-events: none; }
/* 재생점 — 유튜브의 동그라미처럼 잡을 자리가 보인다. 누르는 것은 바 전체라 점 자체는 클릭을 받지 않는다 */
.tl-head::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translateX(-50%); background: var(--ink); box-shadow: 0 0 0 2px var(--surface-2); }
/* 휠 안내 — 바에 마우스를 올리면 오른쪽 위에 마우스(휠) 표식과 한 줄. 끄는 동안·터치 기기·한 번 굴린 뒤에는 없다 */
.tl-hint { position: absolute; top: 4px; right: 6px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px;
  border-radius: var(--r-full); background: var(--ink); color: var(--surface-2); font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateY(-2px); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); pointer-events: none; z-index: 3; }
.tl-hint svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tl-hint[hidden] { display: none; }
@media (hover: hover) { .cutx-tl:hover:not(.scrub) .tl-hint { opacity: 1; transform: none; } }
.cutx-tl.scrub { cursor: grabbing; }
.cutx-tl.scrub .tl-head::before { width: 16px; height: 16px; top: -9px; }
/* 손잡이 — 보이는 막대는 가늘어도 누르는 자리는 44px (§11) */
.tl-h { position: absolute; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); display: grid; place-items: center;
  cursor: ew-resize; touch-action: none; outline: none; z-index: 2; }
.tl-h i { display: block; width: 12px; height: 60px; border-radius: 4px; background: var(--hot); box-shadow: 0 0 0 2px var(--surface-2); }
.tl-h i::after { content: ""; display: block; width: 2px; height: 20px; margin: 20px auto 0; background: var(--surface-2); border-radius: 2px; }
.tl-h:focus-visible i, .tl-h.drag i { box-shadow: 0 0 0 2px var(--ink); }
/* 그림자는 강제 색에서 사라진다 — 투명한 외곽선이 그때 시스템 색으로 보인다 (R7-12) */
.tl-h:focus-visible i { outline: 2px solid transparent; outline-offset: 2px; }
.tl-h[hidden] { display: none; }
.tl-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 2px 8px; border-radius: 6px;
  background: var(--ink); color: var(--surface-2); font: 600 var(--t-sm) var(--mono); white-space: nowrap; pointer-events: none; }
.cutx-tllab { display: flex; justify-content: space-between; padding: 0 calc(var(--ctl-md) + 8px);
  font: 400 var(--t-xs) var(--mono); color: var(--ink-3); }

.cutx-nums { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--t-base); color: var(--ink-1); }
.cutx-nums label { display: inline-flex; align-items: center; gap: 6px; }
.cutx-nums input:not([type]) { width: 104px; height: var(--ctl-md); padding: 0 8px; font: 400 var(--t-md) var(--mono);
  background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-2); border-radius: 6px; }
/* 초점은 테두리 색만이 아니라 고리다 (R7-12) — 어두운 바탕에서 1px 색 변화는 안 보이고 강제 색에서는 아예 사라진다 */
.cutx-nums input:not([type]):focus { border-color: var(--hot); outline: 2px solid var(--hot); outline-offset: 1px; }
.cutx-len b { font: 600 var(--t-md) var(--mono); color: var(--ink); }
.cutx-precise { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); cursor: pointer; }
.cutx-hint { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.cutx-msg { margin: 0; min-height: 18px; font-size: var(--t-base); color: var(--ink-1); }
.cutx-msg.warn { color: var(--hot); }
.cutx-msg.bad { color: var(--bad); }
.cutx-msg.ok { color: var(--cool); }
.cutx-range { margin: 0; font: 400 var(--t-md) var(--mono); color: var(--ink-1); }
.cutx-spans { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.cutx-spans li { display: flex; align-items: center; gap: 10px; font-size: var(--t-base); color: var(--ink-1);
  padding: 2px 6px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; }
.cutx-spans li.on { border-color: var(--hot); background: var(--hot-ghost); color: var(--ink); }
.cutx-spans .sp-n { font-weight: 600; }
.cutx-spans .sp-act { margin-left: auto; display: inline-flex; gap: 4px; }
.cutx-spans .sp-act .up svg { transform: rotate(-90deg); }
.cutx-spans .sp-act .down svg { transform: rotate(90deg); }
.cutx-spans .btn:disabled { opacity: var(--o-off); }
.cutx-spanbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cutx-spanbar .btn { display: inline-flex; align-items: center; gap: 4px; }
.cutx-spanbar .btn svg { width: 12px; height: 12px; }
.cutx-total { margin-left: auto; font: 400 var(--t-sm) var(--mono); color: var(--ink-2); }
.cutx-total.over { color: var(--bad); }
.cutx-numsel:empty { display: none; }
.cutx-numsel { font-size: var(--t-base); color: var(--ink); }
.cutx-spans .btn { width: var(--ctl-md); padding: 0; }
.cutx-spans .btn svg { width: 12px; height: 12px; }
.cutx-spans .mono { font-family: var(--mono); }
.cutx-spans .muted { color: var(--ink-3); }

.cutx-folds { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: var(--t-base); }
.cutx-folds details { min-width: 0; }
.cutx-folds details[open] { flex-basis: 100%; }
.cutx-folds summary { cursor: pointer; color: var(--ink-1); }
.cutx-folds p { margin: 6px 0 0; color: var(--ink-1); line-height: 1.6; }
.cutx-folds p.muted { color: var(--ink-3); }
.cutx-folds ul { margin: 6px 0 0; padding-left: 16px; }
.cutx-folds li small { color: var(--ink-3); margin-left: 6px; font-size: var(--t-sm); }   /* <small> 기본 83% 는 계단 밖(10.8px)이다 (A29) */
.cutx-folds a { color: var(--ink); }

/* 아래 띠 — 강조 색 단추는 하나 (§5.3). 모바일에서도 안전 영역 위에 선다 */
.cutx-foot { flex: none; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface-2); border-top: 1px solid var(--line); }
.cutx-left { display: flex; align-items: center; gap: 6px; }
.cutx-left .btn { width: var(--ctl-md); padding: 0; }
.cutx-left .btn svg { width: 14px; height: 14px; }
.cutx-left .btn:disabled { opacity: var(--o-off); }
.cutx-saved { font-size: var(--t-sm); color: var(--cool); }
.cutx-foot[hidden] { display: none; }
.cutx-foot .cx-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cutx-foot .cx-acts .btn:disabled { opacity: var(--o-off); }
.cutx-makenote { flex-basis: 100%; text-align: right; font-size: var(--t-sm); color: var(--ink-3); }

.cutx-ask { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #000a; border-radius: 16px; }
.cutx-ask > div { background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 12px; padding: 16px 20px;
  max-width: 420px; box-shadow: var(--e-3); }
.cutx-ask h3 { margin: 0 0 16px; font-size: var(--t-lg); }
.cutx-ask .cx-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cutx-ask button { height: var(--ctl-md); padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-2);
  background: var(--surface-4); color: var(--ink); font-size: var(--t-base); cursor: pointer; }
.cutx-ask button.primary { background: var(--ink); color: var(--surface-3); border-color: var(--ink); }

.cd-head-act { display: flex; gap: 6px; align-items: center; }

@media (max-width: 720px) {
  .cutx-back { padding: 0; }
  .cutx { width: 100%; height: 100%; max-height: none; border-radius: 0; border: 0; }
  .cutx-head { padding: 12px 16px 6px; }
  .cutx-body { padding: 4px 16px 12px; }
  .cutx-foot { padding-left: 16px; padding-right: 16px; }
  .cutx-stage { --stage-h: 34vh; }
  .cutx-skel .sk-stage { height: 34vh; }
  .cutx-back .cutx { animation-name: ui-rise-in; }
  .cutx-back.is-leaving .cutx { animation-name: ui-rise-out; }
  .cutx-loop { margin-left: 0; }
  .cutx-precise { margin-left: 0; }
  .cutx-foot .cx-acts { flex-wrap: wrap; justify-content: flex-end; }
  .cutx-makenote { text-align: left; }
}