/* bg-remove 전용 스타일 — style.css 클래스/변수를 재사용하고, 새 레이아웃만 정의 */

.navlink{display:inline-block; margin-top:10px; color:var(--brand); font-weight:700;
  font-size:14px; text-decoration:none}
.notice{margin:12px 0 0; padding:10px 12px; font-size:13px; line-height:1.5;
  color:var(--text); background:var(--card-2); border:1px solid var(--line); border-radius:10px}

.row select, .row input[type=number]{flex:1; padding:9px 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--card-2); color:var(--text); font-size:14px}
.row input[type=number]{max-width:140px}

/* 정리 옵션 체크박스 */
.row-check{flex-direction:column; align-items:stretch; gap:8px}
.chk{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); cursor:pointer}
.chk input{width:17px; height:17px; accent-color:var(--brand); flex:0 0 auto}
.chk-hint{font-size:12px; color:var(--muted)}

/* 옵션 그룹(크로마키 / rembg) */
.grp{border:1px solid var(--line); border-radius:10px; padding:8px 10px 4px; margin:10px 0}
.grp-cap{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); margin:0 2px 6px}

/* 디스필 슬라이더 */
.row input[type=range]{flex:1; accent-color:var(--brand)}
.rng-v{display:inline-block; min-width:2.2em; color:var(--brand); font-weight:800;
  font-variant-numeric:tabular-nums}

.grp-title{font-size:14px; font-weight:800; margin:14px 2px 8px}
.grp-title span{color:var(--muted); font-weight:600}
.cardlist{display:flex; flex-direction:column; gap:10px}

/* 결과 성공/실패 탭 */
.restabs{display:flex; gap:6px; margin:8px 0 12px}
.restab{flex:1; appearance:none; border:1px solid var(--line); background:var(--card-2);
  color:var(--muted); font-weight:800; font-size:13px; padding:9px 10px; border-radius:7px; cursor:pointer}
.restab.is-active{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.restab span{font-variant-numeric:tabular-nums}

/* 파일별 카드: 좌 원본 / 우 결과 */
.bg-card{border:1px solid var(--line); border-radius:12px; background:var(--card-2); padding:10px}
.bg-card .bg-head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.bg-card .bg-name{flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bg-card .bg-dim{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.bg-card .bg-info{font-size:12px; color:var(--muted); margin:-2px 2px 8px}
.bg-card .bg-info b{color:var(--text); font-weight:700}

/* 요소 키워드 */
.bg-kw{display:flex; align-items:flex-start; gap:8px; margin:0 2px 8px}
.bg-kw .kw-list{flex:1; display:flex; flex-wrap:wrap; gap:4px}
.bg-kw .kw{font-size:12px; padding:2px 8px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:var(--text)}
.bg-kw .kw-copy{flex:0 0 auto; white-space:nowrap}
.bg-kw.kw-err{font-size:12px; color:var(--danger)}

.compare{display:flex; gap:8px}
.compare .side{flex:1; min-width:0; text-align:center}
.compare .side .lab{font-size:11px; color:var(--muted); margin-bottom:4px}
.compare .box{border:1px solid var(--line); border-radius:8px; overflow:hidden;
  height:160px; display:flex; align-items:center; justify-content:center}
.compare .box img{max-width:100%; max-height:100%; display:block}

.badge{display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px}
.badge.fail{background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger)}

/* 미리보기 배경 토글 — 흰 잔여물/내부 구멍을 눈으로 확인하기 위함.
   체커보드만으로는 흰 헤일로가 안 보여서 검정 배경으로 뒤집어 본다. */
.bgtoggle{display:flex; align-items:center; gap:6px; margin:8px 0 12px; flex-wrap:wrap}
.bgtoggle-lab{font-size:12px; color:var(--muted); margin-right:2px}
.bgtoggle .seg-btn{padding:5px 12px; font-size:13px; flex:0 0 auto}
/* 결과(우측) 미리보기 박스에만 적용 — 원본(좌측)은 그대로 */
#bg-result[data-bg="white"] .compare .box.checker{background:#fff}
#bg-result[data-bg="black"] .compare .box.checker{background:#111}