/* 이미지 크기 줄이기 — 고유 스타일 없음.
   공용 컴포넌트는 style.css 9-B절(이미지 도구 공통)에 있습니다.
   이 파일은 앞으로 이 도구에만 필요한 규칙이 생겼을 때 쓰려고 남겨 둡니다. */

/* 결과 용량이 원본보다 커졌을 때 눈에 띄게 */
#stat-size { font-variant-numeric: tabular-nums; }

/* --- 원본 / 결과 비교 --- */
.compare-stage {
    position: relative;
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius);
    overflow: hidden;
    /* 투명 배경 확인용 체커보드 */
    background-color: var(--surface-inset);
    background-image:
        linear-gradient(45deg, var(--border) 25%, transparent 25%),
        linear-gradient(-45deg, var(--border) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--border) 75%),
        linear-gradient(-45deg, transparent 75%, var(--border) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    user-select: none;
}

.compare-canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/*
 * 결과 레이어는 오른쪽에 고정해 두고 보이는 폭만 줄입니다.
 * (왼쪽부터 잘라내면 그림이 밀려서 두 장이 어긋나 보입니다)
 */
.compare-after {
    position: absolute;
    inset: 0 0 0 auto;
    width: 50%;
    overflow: hidden;
}

.compare-after .compare-canvas {
    position: absolute;
    top: 0;
    right: 0;
    max-width: none;
}

.compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.compare-tag {
    position: absolute;
    bottom: var(--space-2);
    padding: 2px var(--space-3);
    border-radius: 999px;
    background-color: rgba(3, 12, 24, 0.62);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    pointer-events: none;
}

.compare-tag-left { left: var(--space-2); }
.compare-tag-right { right: var(--space-2); }

/*
 * 비교 슬라이더 묶음.
 * `.field.field-wide` 를 쓰면 flex-basis:100% 가 **세로 방향**으로 해석되어
 * 세로 flex 컨테이너 안에서 260px 짜리 빈 칸이 생깁니다. 그래서 별도 클래스를 씁니다.
 */
.compare-control {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--space-2);
}

.compare-control label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
}