/* 동영상 화면 자르기 */
.vcr-editor[hidden], .vcr-result[hidden], .vcr-stage [hidden] { display: none; }
.vcr-name { margin: 0; font-weight: 700; word-break: break-all; }
.vcr-info { margin: 0.15rem 0 0.8rem; font-size: 0.85rem; color: var(--text-sub); font-variant-numeric: tabular-nums; }

.vcr-frame { padding: 16px; }
.vcr-stage { position: relative; margin: 0 auto; background: #000; user-select: none; }
/* 영상과 어둡게 덮는 층을 같은 틀 안에서 자른다 — 화면 크기가 소수점 픽셀이면 가장자리 한 줄이 덮이지 않고 남았다 */
.vcr-media { position: absolute; inset: 0; overflow: hidden; }
.vcr-media video, .vcr-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 잘려 나갈 곳을 어둡게: 남는 영역(구멍)의 큰 그림자로 덮는다.
   경계선은 구멍 바로 바깥 1px — 검정 테(그림자 1px) 위에 흰 점선(outline)을 얹어 어떤 화면에서도 보이게 한다.
   남는 픽셀은 하나도 가리지 않는다 */
.vcr-dim { position: absolute; inset: 0; pointer-events: none; }
.vcr-hole { position: absolute; box-shadow: 0 0 0 1px #000, 0 0 0 9999px rgb(0 0 0 / 0.55); outline: 1px dashed #fff; }
.vcr-overlay { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.vcr-box { position: absolute; cursor: move; outline: none; }
.vcr-box:focus-visible { outline: 1px dashed var(--pastel-blue); outline-offset: 4px; }
/* 손잡이는 상자 바깥(선에서 3px 떨어져)에 둔다 */
.vcr-h { position: absolute; width: 10px; height: 10px; background: #fff; border: 1px solid var(--primary); border-radius: 2px; box-sizing: border-box; }
/* 손가락으로도 잡히게 실제로 눌리는 범위는 44px */
.vcr-h::after { content: ''; position: absolute; inset: -17px; }
.vcr-h[data-h=nw] { left: -13px; top: -13px; cursor: nwse-resize; }
.vcr-h[data-h=n] { left: calc(50% - 5px); top: -13px; cursor: ns-resize; }
.vcr-h[data-h=ne] { right: -13px; top: -13px; cursor: nesw-resize; }
.vcr-h[data-h=e] { right: -13px; top: calc(50% - 5px); cursor: ew-resize; }
.vcr-h[data-h=se] { right: -13px; bottom: -13px; cursor: nwse-resize; }
.vcr-h[data-h=s] { left: calc(50% - 5px); bottom: -13px; cursor: ns-resize; }
.vcr-h[data-h=sw] { left: -13px; bottom: -13px; cursor: nesw-resize; }
.vcr-h[data-h=w] { left: -13px; top: calc(50% - 5px); cursor: ew-resize; }
/* 비율을 고정하면 변 손잡이는 감춘다(모서리로만 키운다) */
.vcr-box.locked .vcr-h[data-h=n], .vcr-box.locked .vcr-h[data-h=e],
.vcr-box.locked .vcr-h[data-h=s], .vcr-box.locked .vcr-h[data-h=w] { display: none; }

.vcr-seek { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; font-size: 0.85rem; color: var(--text-sub); }
.vcr-seek input { flex: 1; min-height: 44px; accent-color: var(--primary-solid); }

.vcr-zoom { margin: 0 0 1.25rem; }
.vcr-zoom h3 { margin: 0 0 0.25rem; font-size: 0.95rem; }
.vcr-range { margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text); }
.vcr-loupes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; max-width: 640px; }
.vcr-loupes figure { margin: 0; text-align: center; }
.vcr-loupes canvas { display: block; width: 100%; aspect-ratio: 1; image-rendering: pixelated; border-radius: 6px; background: #26262e; }
.vcr-loupes figcaption { margin-top: 0.25rem; font-size: 0.78rem; color: var(--text-sub); }

.vcr-fields { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; }
.vcr select, .vcr input[type=number] { min-height: 44px; padding: 0 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 0.92rem; }
.vcr input[type=number] { width: 6.5rem; font-family: var(--font-mono); }
.vcr-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.vcr-actions .btn { min-height: 44px; padding: 0 1.1rem; font-weight: 600; }
.vcr-actions .btn[hidden] { display: none; }
.vcr-actions .btn:disabled { opacity: 0.55; }
#vcr-progress { width: 100%; height: 10px; margin-top: 0.8rem; accent-color: var(--primary-solid); }
#vcr-progress[hidden] { display: none; }
.vcr-status { min-height: 1.2em; margin: 0.4rem 0 0; font-size: 0.86rem; font-weight: 600; color: var(--text-sub); }
.vcr-result { margin-top: 1.25rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; }
.vcr-result video { width: 100%; max-height: 50vh; background: #000; border-radius: 8px; }
.vcr-result-text { margin: 0.6rem 0; font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
.vcr-result .btn-download-all { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

@media (max-width: 480px) {
  .vcr input[type=number] { width: 5.5rem; }
  .vcr-loupes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}