/* 이미지 WebP 변환기 '비교 라이트박스' — 결과 띠 → [비교 무대 | 압축 강도 사다리] → 사진 목록. 작업면 700px 미만 한 칸, 480px 이하 목록 두 줄. */
.wv-work{position:relative;display:grid;gap:14px;padding:16px;container:wv/inline-size}
.wv-work [hidden]{display:none !important}
.wv-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.wv-input:focus-visible ~ .wv-drop .wv-dropbox,.wv-input:focus-visible ~ .wv-tray .wv-more{outline:2px solid var(--accent);outline-offset:2px}

/* 넣기 전: 끌어 놓기 상자 | 예시 카드 (두 칸 높이 같음) */
.wv-drop{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px}
.wv-dropbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:250px;padding:22px 18px;border:1.5px dashed var(--soft);border-radius:var(--radius);background:color-mix(in srgb, var(--wash) 55%, var(--paper));text-align:center;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.wv-dropbox:hover,.wv-work.is-over .wv-dropbox{border-color:var(--ink);background:var(--wash)}
.wv-dropbox > b{font-family:var(--sans);font-size:16px;font-weight:750;color:var(--ink)}
.wv-dropbox > span:not(.v2-btn){max-width:44ch;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.wv-pickbtn{margin-top:4px;pointer-events:none}
.wv-fly{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.wv-fly i,.wv-fly b{display:grid;place-items:center;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:5px;background:var(--paper);font-family:var(--mono);font-size:11px;font-style:normal;font-weight:700;color:var(--muted)}
.wv-fly b{position:relative;margin-left:22px;border-color:var(--ink);background:var(--ink);color:var(--paper)}
.wv-fly b::before{content:"";position:absolute;right:calc(100% + 6px);top:50%;width:14px;height:2px;background:var(--muted)}
.wv-fly b::after{content:"";position:absolute;right:calc(100% + 5px);top:50%;width:6px;height:6px;margin-top:-3px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg)}
.wv-sample{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.wv-sthumb{display:block;width:100%;max-width:344px;height:auto;aspect-ratio:344 / 112}
.wv-sample p{margin:0;font-family:var(--sans)}
.wv-sample p b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.wv-sample p span{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.wv-sample .v2-btn{align-self:flex-start}
.wv-facts{display:grid;gap:4px;margin:auto 0 0;padding:10px 0 0;border-top:1px solid var(--soft);list-style:none;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}
.wv-facts li{position:relative;padding-left:16px}
.wv-facts li::before{content:"";position:absolute;left:2px;top:4px;width:8px;height:4px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg)}

/* 결과 띠 */
.wv-sum{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 22px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius)}
.wv-snum{min-width:0}
.wv-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:3px 0 0}
.wv-big b{font-family:var(--sans);font-size:28px;font-weight:800;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.wv-big span{font-family:var(--sans);font-size:15px;font-weight:750;color:var(--accent);white-space:nowrap}
.wv-big span.is-grow{color:var(--muted)}
.wv-ssub{margin:4px 0 0;font-family:var(--sans);font-size:12px;color:var(--muted)}
.wv-sbars{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:7px 10px}
.wv-sl{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.wv-sv{min-width:64px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wv-strack{display:block;height:12px;border-radius:3px;background:color-mix(in srgb, var(--soft) 40%, transparent);overflow:hidden}
.wv-sbar{display:block;width:100%;height:100%;border-radius:3px;background:color-mix(in srgb, var(--ink) 28%, transparent)}
.wv-sbar--b{background:var(--ink);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.wv-sbar--b.is-wait,.wv-step.is-busy .wv-lbar,.wv-row.is-busy .wv-rbar{background-image:linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--paper) 55%, transparent) 50%, transparent 70%);background-size:220% 100%;animation:wv-scan 1.2s linear infinite}
.wv-sbar--b.is-wait{background-color:color-mix(in srgb, var(--ink) 18%, transparent)}
@keyframes wv-scan{from{background-position:120% 0}to{background-position:-120% 0}}
.wv-save{white-space:nowrap}

/* 비교 무대 | 압축 강도 */
.wv-main{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:16px;align-items:stretch}
.wv-view{display:flex;flex-direction:column;gap:8px;min-width:0}
.wv-vbar{display:flex;align-items:center;gap:6px;min-height:32px}
.wv-arrow{width:32px;padding:0;justify-content:center}
.wv-arrow .i{transform:rotate(180deg)}
.wv-arrow--next .i{transform:none}
.wv-pos{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.wv-vinfo{flex:1 1 auto;min-width:0;overflow:hidden;font-family:var(--sans);font-size:12px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.wv-viewer{position:relative;flex:1 1 auto;min-height:300px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb, var(--wash) 80%, var(--paper));overflow:hidden}
.wv-stage{position:absolute;inset:0;display:flex;padding:12px;overflow:auto;outline:0;touch-action:pan-x pan-y}
.wv-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.wv-canv{position:relative;flex:0 0 auto;margin:auto;background-color:#fff;background-image:conic-gradient(#e6e6e6 25%, #fff 0 50%, #e6e6e6 0 75%, #fff 0);background-size:16px 16px;box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 18%, transparent)}
.wv-ca,.wv-cb{display:block;max-width:none}
.wv-cb{position:absolute;left:0;top:0}
.wv-split{position:absolute;top:0;bottom:0;left:50%;z-index:2;display:none;width:28px;margin-left:-14px;outline:0;cursor:ew-resize;touch-action:pan-y}
.wv-work.has-b .wv-split{display:block}
.wv-split i{position:absolute;top:0;bottom:0;left:13px;width:2px;background:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb, var(--paper) 80%, transparent)}
.wv-split b{position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid var(--ink);border-radius:50%;background:var(--card) no-repeat center / 18px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M5 1 1 5l4 4M13 1l4 4-4 4' fill='none' stroke='%23887766' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.wv-split:focus-visible b{outline:2px solid var(--accent);outline-offset:2px}
.wv-tag{position:absolute;top:8px;z-index:1;max-width:calc(50% - 22px);overflow:hidden;padding:2px 7px;border-radius:var(--radius);background:color-mix(in srgb, var(--card) 90%, transparent);font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.wv-tag--a{left:8px}
.wv-tag--b{right:8px}
.wv-work:not(.has-b) .wv-tag--b{color:var(--muted)}
.wv-tag:empty{display:none}
.wv-work.is-sweep .wv-cb{transition:clip-path .75s cubic-bezier(.2,.7,.2,1)}
.wv-work.is-sweep .wv-split{transition:left .75s cubic-bezier(.2,.7,.2,1)}
.wv-vmsg{position:absolute;inset:0;z-index:3;display:grid;place-items:center;margin:0;padding:20px;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.wv-shint{margin:0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}

.wv-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.wv-shead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.wv-shead small{font-family:var(--sans);font-size:11px;color:var(--muted);text-align:right}
.wv-ladder{position:relative;display:grid;grid-template-columns:fit-content(46%) minmax(40px,1fr) auto;gap:2px 0;margin-bottom:14px}
.wv-step{position:relative;z-index:1;display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;gap:0 10px;min-height:44px;padding:3px 8px;border:1px solid transparent;border-radius:var(--radius);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.wv-step:hover{background:color-mix(in srgb, var(--wash) 80%, transparent)}
.wv-step:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wv-step[aria-pressed="true"]{border-color:var(--ink);background:var(--paper);box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent)}
.wv-step[data-step="0"]{grid-row:1}.wv-step[data-step="1"]{grid-row:2}.wv-step[data-step="2"]{grid-row:3}.wv-step[data-step="3"]{grid-row:4}.wv-step[data-step="4"]{grid-row:5}.wv-step[data-step="5"]{grid-row:6} /* 빗금 구간(5~6줄)과 겹쳐 놓으려면 줄을 정해 둬야 한다(자동 배치는 빈 줄로 밀어냄) */
.wv-sn{min-width:0}
.wv-sn b{display:block;font-family:var(--sans);font-size:13px;font-weight:650;line-height:1.25;white-space:nowrap}
.wv-step[aria-pressed="true"] .wv-sn b{font-weight:800}
.wv-sn small{display:block;font-family:var(--sans);font-size:10.5px;line-height:1.3;color:var(--muted)}
.wv-lbar{position:relative;display:block;height:10px;border-radius:3px;background:color-mix(in srgb, var(--soft) 38%, transparent);overflow:hidden}
.wv-lbar i{display:block;width:0;height:100%;border-radius:3px;background:color-mix(in srgb, var(--ink) 50%, transparent);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.wv-step[aria-pressed="true"] .wv-lbar i{background:var(--ink)}
.wv-step.is-grow .wv-lbar i,.wv-row.is-grow .wv-rb{background:repeating-linear-gradient(135deg, var(--muted) 0 3px, transparent 3px 6px)}
.wv-sz{min-width:58px;text-align:right;white-space:nowrap}
.wv-ssz{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.wv-spc{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.wv-spc:empty{display:none}
.wv-zone{position:relative;z-index:0;grid-column:1 / -1;grid-row:5 / 7;border-radius:var(--radius);background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 13%, transparent) 0 4px, transparent 4px 9px);pointer-events:none}
.wv-zone span{position:absolute;top:calc(100% + 2px);right:6px;font-family:var(--sans);font-size:10.5px;font-style:normal;color:var(--muted);white-space:nowrap}
.wv-ladder.is-custom .wv-step[aria-pressed="false"]{opacity:.85}
.wv-lnote{margin:0;padding:8px 10px;border-radius:var(--radius);background:color-mix(in srgb, var(--wash) 80%, var(--paper));font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--ink)}
.wv-sset{display:flex;flex-direction:column;gap:12px;min-width:0}
.wv-sidef{display:grid;gap:5px}
.wv-sides{display:flex;flex-wrap:wrap;gap:4px}
.wv-sides button{flex:1 0 auto;padding:0 7px;font-variant-numeric:tabular-nums}
.wv-adv summary{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);cursor:pointer}
.wv-qf{display:grid;grid-template-columns:auto minmax(0,1fr) 3ch;align-items:center;gap:10px;margin:8px 0 4px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.wv-qf input{width:100%;accent-color:var(--ink)}
.wv-qf output{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);text-align:right}
.wv-eng{margin:0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* 사진 목록: 썸네일 | 이름·형식 | 원본 → WebP 막대 | 크기 | 저장·빼기. 여섯 줄에 맞춘 높이, 더 있으면 스크롤 그림자 */
.wv-thead{display:flex;align-items:center;gap:6px}
.wv-thead .v2-label{flex:1 1 auto}
.wv-more{cursor:pointer}
.wv-rows{--rh:58px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(48px,1fr) auto auto;max-height:calc(var(--rh) * 6 + 2px);margin:8px 0 0;padding:0;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);list-style:none;
  background:linear-gradient(var(--card) 30%, transparent) center top / 100% 24px no-repeat local,linear-gradient(transparent, var(--card) 70%) center bottom / 100% 24px no-repeat local,radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--ink) 16%, transparent), transparent) center top / 100% 8px no-repeat scroll,radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) center bottom / 100% 8px no-repeat scroll}
.wv-row{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;gap:0 12px;box-sizing:border-box;height:var(--rh);padding:0 8px;border-top:1px solid var(--soft)}
.wv-row:first-child{border-top:0}
.wv-row.is-sel{background:color-mix(in srgb, var(--wash) 75%, transparent);box-shadow:inset 3px 0 0 var(--ink)}
.wv-rsel{display:flex;align-items:center;gap:10px;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.wv-rsel:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px}
.wv-rth{display:grid;flex:0 0 44px;place-items:center;width:44px;height:44px;overflow:hidden;border:1px solid var(--soft);border-radius:4px;background-color:#fff;background-image:conic-gradient(#e6e6e6 25%, #fff 0 50%, #e6e6e6 0 75%, #fff 0);background-size:10px 10px}
.wv-tc{display:block;max-width:100%;max-height:100%}
.wv-rname{display:flex;flex-direction:column;min-width:0}
.wv-rname b{overflow:hidden;font-family:var(--sans);font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.wv-rname small{overflow:hidden;font-family:var(--sans);font-size:11px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.wv-rerr{display:none;grid-column:2 / 4;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--accent)}
.wv-row.is-err{height:auto;min-height:var(--rh);padding-top:6px;padding-bottom:6px}
.wv-row.is-err .wv-rerr{display:block}
.wv-row.is-err .wv-rres{display:none}
.wv-rres{display:contents}
.wv-rbar{position:relative;display:block;height:10px;border-radius:3px;background:color-mix(in srgb, var(--ink) 16%, transparent);overflow:hidden}
.wv-rb{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:3px;background:var(--ink);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.wv-rsz{text-align:right;white-space:nowrap}
.wv-rsz b{display:block;font-family:var(--mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.wv-rsz small{display:block;font-family:var(--mono);font-size:11px;color:var(--muted)}
.wv-ract{display:flex;gap:4px}
.wv-ract .v2-btn{width:32px;padding:0;justify-content:center}
.wv-status:empty{display:none}
.wv-noscript{margin:0;font-family:var(--sans);font-size:13px;color:var(--accent)}

@container wv (max-width: 699px){
  .wv-main{grid-template-columns:minmax(0,1fr)}
  .wv-viewer{flex:0 0 auto}
}
@container wv (max-width: 699px){ /* 한 칸일 때(노트북 1280px의 작업면 약 648px 포함): 사다리는 전체 폭, 긴 변 | 품질 직접은 한 줄에 나란히(좁으면 줄바꿈) */
  .wv-sset{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:12px 20px}
  .wv-sidef{flex:1 1 300px}
  .wv-adv{flex:1 1 180px}
  .wv-eng{flex:1 1 100%}
}
@container wv (min-width: 520px) and (max-width: 699px){ .wv-adv{padding-top:20px} } /* 긴 변 버튼 줄과 높이를 맞춤(나란히 놓일 때만) */
@container wv (max-width: 600px){
  .wv-drop{grid-template-columns:minmax(0,1fr)}
  .wv-dropbox{min-height:200px}
  .wv-sum{grid-template-columns:minmax(0,1fr)}
  .wv-save{width:100%;justify-content:center}
}
@container wv (max-width: 480px){
  .wv-work{padding:12px}
  .wv-rows{--rh:76px;grid-template-columns:minmax(0,1fr) auto;max-height:calc(var(--rh) * 5 + 2px)}
  .wv-row{grid-template-rows:auto auto;align-content:center;gap:6px 10px}
  .wv-rsel{grid-column:1;grid-row:1;height:auto}
  .wv-ract{grid-column:2;grid-row:1}
  .wv-rres{display:flex;grid-column:1 / -1;grid-row:2;align-items:center;gap:10px;margin-left:54px} /* 크기 글자가 2열을 넓혀 이름이 잘리지 않게 막대와 한 줄로 */
  .wv-rbar{flex:1 1 auto}
  .wv-rsz{display:flex;flex:0 0 auto;align-items:baseline;gap:6px}
  .wv-rerr{grid-column:1 / -1;grid-row:2;margin-left:54px}
  .wv-rsz b,.wv-rsz small{display:inline}
  .wv-big b{font-size:24px}
  .wv-vbar{flex-wrap:wrap;justify-content:flex-start}
  .wv-vinfo{order:9;flex:1 1 100%;white-space:normal}
  .wv-vbar #wvZoom{margin-left:auto}
}
@media (prefers-reduced-motion: reduce){
  .wv-work *,.wv-work *::before,.wv-work *::after{transition:none !important;animation:none !important}
}