/* ═══════════════════════════════════════════════════════════════════
   clip-box 전용 스타일 — css/db-tokens.css · css/tool.css 뒤에 얹는다
   ═══════════════════════════════════════════════════════════════════
   규칙:
     · 새 색·새 폰트를 만들지 않는다. tool.css 의 이름(=공통 토큰)만 쓴다.
     · tool.css 에 있는 것(.db .inp .pan .hint .sec2 .prg .badge .dropzone
       .rangerow .fieldrow .pickrow .filebtn .summary .namepv .mk-bar …)을
       먼저 찾아 쓰고, 여기에는 영상 화면에만 필요한 것만 만든다.

   여기 남은 것: 담아 둔 구간 줄 · 미리보기 무대 · 필름(타임라인) · 크롭 칸 · 결과 카드.
   전부 "영상을 다루는 서비스" 에만 필요한 것들이다.
   ─────────────────────────────────────────────────────────────────── */

/* ── 왼쪽: 담아 둔 구간 ───────────────────────────────── */
#queueList{margin-top:10px}

.qitem{display:flex;align-items:center;gap:7px;padding:5px 6px;margin-bottom:5px;
  border:1px solid transparent;border-radius:var(--r-m);background:var(--panel2);
  cursor:pointer;transition:all .12s}
.qitem:hover{border-color:var(--line)}
.qitem.on{border-color:var(--acc);background:var(--acc-soft)}
.qitem input[type=checkbox]{flex-shrink:0;accent-color:var(--acc);width:13px;height:13px;margin:0}
.qitem .idx{flex-shrink:0;width:15px;text-align:right;font-size:10.5px;font-weight:700;color:var(--ink3)}
.qitem.on .idx{color:var(--acc-ink)}
.qitem .th{width:42px;height:42px;flex-shrink:0;border-radius:var(--r-s);object-fit:cover;
  background:var(--line-soft);border:1px solid var(--line)}
.qitem .meta{min-width:0;flex:1}
.qitem .nm{font-size:11px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.qitem .mt{font-size:10px;color:var(--ink3);font-weight:600;margin-top:1px}

/* ── 가운데: 미리보기 무대 ─────────────────────────────── */
.pan > .ph #stageName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}

.pb-stage{padding:0;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;background:var(--bg)}

#videoBox{position:relative;display:none;line-height:0}
#videoBox.on{display:block}
/* 영상 경계를 바탕과 구분해 준다 */
#vid{display:block;background:var(--ink);
  box-shadow:0 0 0 1px var(--line),0 2px 10px rgba(28,32,36,.10)}

#stageEmpty{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;text-align:center;padding:24px;pointer-events:none}
#stageEmpty i{font-size:26px;color:var(--line-d)}
#stageEmpty p{font-size:12.5px;font-weight:700;color:var(--ink2);max-width:360px;line-height:1.6}
#stageEmpty span{font-size:11.5px;color:var(--ink3)}

/* ── 가운데: 크롭 칸 ───────────────────────────────────── */
/* 바깥을 어둡게 하는 것은 #cropBox 의 box-shadow 하나로 충분하다.
   덮개를 하나 더 두면 칸 안쪽까지 같이 어두워진다. */
#cropLayer{position:absolute;inset:0;cursor:crosshair}
#cropBox{position:absolute;border:1.5px solid #fff;cursor:move;z-index:2;
  box-shadow:0 0 0 1px rgba(28,32,36,.55),0 0 0 9999px rgba(28,32,36,.55)}
#cropBox::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);
  background-size:33.33% 33.33%;background-position:-1px -1px}
#cropBox .ch{position:absolute;width:11px;height:11px;background:#fff;
  border:1.5px solid var(--acc);border-radius:2px;z-index:3}
#cropBox .ch.nw{left:-6px;top:-6px;cursor:nwse-resize}
#cropBox .ch.ne{right:-6px;top:-6px;cursor:nesw-resize}
#cropBox .ch.sw{left:-6px;bottom:-6px;cursor:nesw-resize}
#cropBox .ch.se{right:-6px;bottom:-6px;cursor:nwse-resize}
#cropBox .ch.n{left:50%;top:-6px;margin-left:-5.5px;cursor:ns-resize}
#cropBox .ch.s{left:50%;bottom:-6px;margin-left:-5.5px;cursor:ns-resize}
#cropBox .ch.w{top:50%;left:-6px;margin-top:-5.5px;cursor:ew-resize}
#cropBox .ch.e{top:50%;right:-6px;margin-top:-5.5px;cursor:ew-resize}
.cropsz{position:absolute;left:0;top:-19px;background:var(--acc-bg);color:var(--on-acc);
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--r-s);
  white-space:nowrap;line-height:1.6}

/* ── 가운데 아래: 필름(타임라인) ──────────────────────── */
/* .pan > .pf 를 그대로 쓰되 한 줄이 아니라 필름 한 덩이가 들어간다 */
#stageFoot{display:block;padding:9px 11px 6px}
#timeline{position:relative;height:60px}
#tlThumbs{position:absolute;left:0;top:0;height:40px;border-radius:var(--r-s);display:block;
  background:var(--line-soft)}
#tlTrack{position:absolute;left:0;right:0;top:0;height:40px;border-radius:var(--r-s);
  cursor:pointer;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.tl-dim{position:absolute;top:0;bottom:0;background:rgba(28,32,36,.52);pointer-events:none}
#tlSel{position:absolute;top:0;bottom:0;cursor:grab;
  border-top:2px solid var(--acc);border-bottom:2px solid var(--acc);
  background:color-mix(in srgb, var(--acc) 10%, transparent)}
#tlSel:active{cursor:grabbing}
#tlSel.moving{background:color-mix(in srgb, var(--acc) 20%, transparent)}
.tl-hand{position:absolute;top:0;bottom:0;width:15px;margin-left:-7.5px;cursor:ew-resize;z-index:3}
.tl-hand i{position:absolute;left:3.5px;top:0;bottom:0;width:8px;background:var(--acc);
  border-radius:3px;border:1px solid #fff}
.tl-hand i::after{content:'';position:absolute;left:1.5px;top:50%;margin-top:-5px;
  width:3px;height:10px;border-left:1px solid rgba(255,255,255,.9);
  border-right:1px solid rgba(255,255,255,.9)}
.tl-hand:hover i{background:var(--acc-ink)}
#tlHead{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;
  background:var(--warn);pointer-events:none;z-index:4}

.tl-len{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--acc-bg);color:var(--on-acc);font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:var(--r-s);white-space:nowrap;
  pointer-events:none;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.55)}

/* 시간 눈금 — 어디가 몇 초인지 알아야 구간을 잡는다 */
#tlRuler{position:absolute;left:0;right:0;top:42px;height:14px;pointer-events:none}
#tlRuler .tk{position:absolute;top:0;font-size:9.5px;color:var(--ink3);font-weight:600;
  font-variant-numeric:tabular-nums;transform:translateX(-50%);white-space:nowrap}
#tlRuler .tk::before{content:'';position:absolute;left:50%;top:-3px;width:1px;height:3px;background:var(--line-d)}
#tlRuler .tk.edge{transform:none}
#tlRuler .tk.edge.r{transform:translateX(-100%)}

#tlTip{position:absolute;top:-5px;background:var(--acc-bg);color:var(--on-acc);font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:var(--r-s);transform:translateX(-50%);
  pointer-events:none;z-index:5;white-space:nowrap}

/* ── 오른쪽: `자세히` 접기 ─────────────────────────────── */
/* 새 부품이 아니라 tool.css 의 .db 를 한 줄짜리 여닫개로 쓴 것이다.
   자주 쓰는 것만 펼쳐 두고 나머지를 여기에 접어, 첫 화면을 짧게 한다. */
.db.fold{width:100%;justify-content:flex-start;color:var(--ink3);font-size:11.5px}
.db.fold i{width:10px;transition:transform .12s}
.db.fold.on i{transform:rotate(90deg)}

/* ── 키보드로 옮겨 다닐 때 지금 어디인지 ───────────────── */
/* tool.css 에는 .inp:focus 만 있어 버튼·탭은 Tab 으로 옮겨도 표시가 없었다.
   다른 화면에도 필요하면 tool.css 로 옮긴다.
   :focus-visible 이라 마우스로 누를 때는 나오지 않는다. */
.db:focus-visible,
.tabbar .tab:focus-visible,
.filebtn:focus-visible,
.dropzone:focus-visible,
.qitem:focus-visible,
.res .rb .db:focus-visible{outline:2px solid var(--acc);outline-offset:2px;
  transition:none}                 /* tool.css 의 transition:all 을 타면 테두리가 뒤늦게 떠오른다 */

/* ── 결과: 이 브라우저가 못 푸는 형식 ──────────────────── */
.res .rv.noplay{min-height:84px;padding:14px 12px;text-align:center}
.res .rv.noplay span{font-size:11px;color:var(--ink3);font-weight:600;line-height:1.6}

/* ── .saved 한 줄 안의 것들 ────────────────────────────── */
/* .saved 는 tool.css 부품이다. 그 줄에 들어가는 버튼은 글자만 한 단계 작게 쓰고,
   높이는 다른 버튼처럼 44px(누르는 곳 최소)을 지킨다. */
.saved .db{padding:3px 10px;font-size:11px;flex-shrink:0}

/* 왼쪽: 넣은 영상 한 줄.
   영상은 담아 둔 구간과 다른 것이므로 구간 목록 위에 따로 두고,
   여기서 바로 뺄 수 있게 한다. */
#fileRow i{flex-shrink:0;color:var(--ink3);font-size:11px}

/* 오른쪽: 로고 미리보기 */
#logoRow img{width:22px;height:22px;flex-shrink:0;object-fit:contain;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel)}

/* ── 오른쪽: 결과 카드 ─────────────────────────────────── */
.res{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  margin-bottom:9px;background:var(--panel)}
.res .rv{background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:64px}
.res .rv img,.res .rv video{max-width:100%;max-height:190px;display:block}
.res .rf{padding:8px 9px}
.res .rn{font-size:11px;font-weight:700;color:var(--ink);overflow-wrap:anywhere;line-height:1.45}
.res .rm{font-size:10.5px;color:var(--ink3);font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.res .rm.miss{color:var(--warn)}
.res .rb{display:flex;gap:6px;margin-top:7px}
.res .rb .db{flex:1;justify-content:center;font-size:11.5px;padding:5px 8px}
.res .rb .db.x{flex:none}

/* 예상 용량이 목표를 넘을 것 같으면 만들기 전에 알려 준다 */
#rEst.over{color:var(--warn);font-weight:700}

/* 처리 중 가림막의 부가 숫자 */
#busySub{color:var(--ink3);font-weight:600}

/* ── 기록 전체 삭제 (페이지 맨 아래, 아래 작업 줄 밑) ──────────
   딴짓 첫 화면 .hub-reset 과 같은 조용한 둥근 테두리 버튼. 색은 공통 토큰만. */
.db-reset-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;flex-shrink:0;
  margin:-2px 10px 0;padding:0 2px 8px;font-size:11.5px;line-height:1.6;color:var(--db-sub)}
.db-reset-row .db-reset{margin-left:auto;min-height:var(--db-hit);padding:0 16px;border:1px solid var(--db-line);
  border-radius:var(--db-pill);background:transparent;color:var(--db-sub);font:inherit;font-weight:700;
  cursor:pointer;transition:color .14s,border-color .14s}
.db-reset-row .db-reset:hover,.db-reset-row .db-reset:focus-visible{color:var(--db-text);border-color:var(--db-sub)}
.db-reset-row .db-reset:disabled{opacity:.5;cursor:default}

/* ── 좁은 화면 ─────────────────────────────────────────── */
@media (max-width:1100px){
  .pb-stage{min-height:360px}
}
@media (max-width:1100px){
  .db-reset-row{margin:4px 8px 0;padding:10px 2px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--db-line)}
}
@media (max-width:700px){
  .db-reset-row{font-size:12.5px}
  .qitem .nm{font-size:13px}
  .qitem .mt{font-size:11.5px}
  #tlRuler .tk{font-size:11px}
}