:root{color-scheme:light}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;background:#f6f8fc;color:#172033}.topbar{max-width:1180px;margin:auto;padding:18px 22px;display:flex;gap:18px;align-items:center}.topbar a{color:#315cce;text-decoration:none}.page{max-width:1180px;margin:auto;padding:10px 22px 70px}.hero,.panel,.result{background:white;border:1px solid #dce4f2;border-radius:22px;padding:28px;margin:16px 0;box-shadow:0 12px 30px rgba(31,55,100,.06)}.hero h1{margin:4px 0 10px;font-size:clamp(28px,4vw,44px)}.hero p{color:#53627a}.drop{border:2px dashed #9cb5e8;border-radius:18px;padding:34px;text-align:center;background:#f8fbff}.drop.drag{background:#edf4ff}.btn{border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer;background:#315cce;color:white}.btn.alt{background:#eef3ff;color:#264a9d}.options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.options label{display:grid;gap:7px;font-weight:700}.options input,.options select{width:100%;padding:11px;border:1px solid #ccd7ea;border-radius:10px}.files{display:grid;gap:10px;margin-top:18px}.file{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #e1e7f1;border-radius:12px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.status{margin-top:12px;color:#43536a}.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.result-item{padding:14px;border:1px solid #dce4f2;border-radius:14px}.result-item img{width:100%;height:150px;object-fit:contain;background:#f3f5f8;border-radius:10px}.seo{margin-top:18px}.seo details{background:white;border:1px solid #dce4f2;border-radius:14px;padding:14px;margin:8px 0}@media(max-width:760px){.options,.result-grid{grid-template-columns:1fr}.hero,.panel,.result{padding:20px}.file{display:block}}

/* v3.14.1 region editor */
.mosaic-mode-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.mosaic-mode{padding:16px;text-align:left;border:1px solid #ced9ec;border-radius:15px;background:#fff;color:#172033;cursor:pointer}.mosaic-mode b,.mosaic-mode span{display:block}.mosaic-mode span{margin-top:5px;color:#61708a;font-size:13px}.mosaic-mode.active{border-color:#315cce;background:#eef4ff;box-shadow:0 0 0 2px rgba(49,92,206,.12)}
.mosaic-workspace{display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:16px;align-items:start}.mosaic-sidebar,.mosaic-editor-panel,.mosaic-settings{border:1px solid #dce4f2;border-radius:16px;background:#fbfcff;padding:14px}.mosaic-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.mosaic-sidebar h3,.mosaic-settings h3{margin:0 0 12px}.mosaic-thumbs{display:grid;gap:8px;max-height:570px;overflow:auto}.mosaic-thumb{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 8px;width:100%;padding:8px 28px 8px 8px;border:1px solid #dce4f2;border-radius:12px;background:white;text-align:left;cursor:pointer}.mosaic-thumb.active{border-color:#315cce;background:#eef4ff}.mosaic-thumb img{grid-row:1/3;width:54px;height:54px;object-fit:cover;border-radius:8px}.mosaic-thumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.mosaic-thumb small{color:#60708b}.mosaic-thumb i{position:absolute;right:8px;top:7px;font-style:normal;font-size:20px;color:#7b879a}.mosaic-empty-list{color:#68768c}.mosaic-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.mini-btn{border:1px solid #ccd8ec;border-radius:9px;padding:8px 10px;background:#fff;color:#244788;font-weight:700;cursor:pointer}.mini-btn:disabled{opacity:.45;cursor:not-allowed}.mini-btn.danger{color:#a93645}.mosaic-canvas-wrap{display:grid;place-items:center;min-height:420px;overflow:auto;border:1px dashed #a9bce0;border-radius:14px;background:linear-gradient(45deg,#f4f6fa 25%,transparent 25%) 0 0/18px 18px,linear-gradient(45deg,transparent 75%,#f4f6fa 75%) 0 0/18px 18px,#fff}.mosaic-canvas-wrap canvas{display:block;max-width:100%;touch-action:none;cursor:crosshair;box-shadow:0 8px 24px rgba(26,45,83,.14)}.mosaic-empty{max-width:420px;padding:30px;text-align:center;color:#68768c}.mosaic-help{margin:10px 2px 0;color:#5d6d86;font-size:13px}.mosaic-settings{display:grid;gap:14px;position:sticky;top:12px}.mosaic-settings label{display:grid;gap:7px;font-weight:700}.mosaic-settings input,.mosaic-settings select{width:100%}.mosaic-settings output{float:right;color:#315cce}.mosaic-summary{display:flex;flex-wrap:wrap;gap:7px;padding-top:10px;border-top:1px solid #dce4f2}.mosaic-summary span,.mosaic-summary b{padding:5px 8px;border-radius:999px;background:#edf2fb;font-size:12px}.mosaic-summary .warn{background:#fff0d8;color:#8a5300}
@media(max-width:980px){.mosaic-workspace{grid-template-columns:180px minmax(0,1fr)}.mosaic-settings{grid-column:1/-1;position:static;grid-template-columns:repeat(3,minmax(0,1fr))}.mosaic-settings h3,.mosaic-summary{grid-column:1/-1}}
@media(max-width:700px){.mosaic-mode-picker{grid-template-columns:1fr}.mosaic-workspace{grid-template-columns:1fr}.mosaic-sidebar{order:1}.mosaic-editor-panel{order:2}.mosaic-settings{order:3;grid-template-columns:1fr}.mosaic-thumbs{display:flex;overflow-x:auto;max-height:none}.mosaic-thumb{min-width:220px}.mosaic-canvas-wrap{min-height:300px}.mosaic-settings h3,.mosaic-summary{grid-column:auto}}


/* v3.14.2 crop and watermark direct editors */
.region-workspace{display:grid;grid-template-columns:220px minmax(0,1fr) 270px;gap:16px;align-items:start;margin-top:18px}.region-sidebar,.region-editor-panel,.region-settings{border:1px solid #dce4f2;border-radius:16px;background:#fbfcff;padding:14px}.region-sidebar h3,.region-settings h3{margin:0 0 12px}.region-thumbs{display:grid;gap:8px;max-height:590px;overflow:auto}.region-thumb{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 8px;width:100%;padding:8px 28px 8px 8px;border:1px solid #dce4f2;border-radius:12px;background:#fff;text-align:left;cursor:pointer}.region-thumb.active{border-color:#315cce;background:#eef4ff}.region-thumb img{grid-row:1/3;width:54px;height:54px;object-fit:cover;border-radius:8px}.region-thumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.region-thumb small{color:#60708b}.region-thumb i{position:absolute;right:8px;top:7px;font-style:normal;font-size:20px;color:#7b879a}.region-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.region-canvas-wrap{display:grid;place-items:center;min-height:440px;overflow:auto;border:1px dashed #a9bce0;border-radius:14px;background:linear-gradient(45deg,#f4f6fa 25%,transparent 25%) 0 0/18px 18px,linear-gradient(45deg,transparent 75%,#f4f6fa 75%) 0 0/18px 18px,#fff}.region-canvas-wrap canvas{display:block;max-width:100%;touch-action:none;cursor:crosshair;box-shadow:0 8px 24px rgba(26,45,83,.14)}.region-empty{max-width:430px;padding:30px;text-align:center;color:#68768c}.region-settings{display:grid;gap:14px;position:sticky;top:12px}.region-settings label{display:grid;gap:7px;font-weight:700}.region-settings input,.region-settings select{width:100%;padding:10px;border:1px solid #ccd7ea;border-radius:10px}.region-info{display:flex;justify-content:space-between;gap:10px;padding:11px;border-radius:11px;background:#edf3ff}.anchor-grid{display:grid;grid-template-columns:repeat(3,34px);gap:7px;margin-top:8px}.anchor-grid button{width:34px;height:30px;border:1px solid #bfcce2;border-radius:7px;background:#fff;cursor:pointer}.anchor-grid button::after{content:'●';color:#315cce;font-size:10px}.region-empty-list{color:#68768c}
@media(max-width:980px){.region-workspace{grid-template-columns:180px minmax(0,1fr)}.region-settings{grid-column:1/-1;position:static;grid-template-columns:repeat(3,minmax(0,1fr))}.region-settings h3{grid-column:1/-1}}
@media(max-width:700px){.region-workspace{grid-template-columns:1fr}.region-thumbs{display:flex;overflow-x:auto;max-height:none}.region-thumb{min-width:220px}.region-canvas-wrap{min-height:300px}.region-settings{grid-template-columns:1fr}.region-settings h3{grid-column:auto}}


/* v3.16.5 common image batch UX */
.image-batch-panel{margin:18px 0;padding:16px;border:1px solid #cfdcf2;border-radius:15px;background:#f8fbff}.image-batch-head{display:flex;justify-content:space-between;gap:14px;align-items:center}.image-batch-head div{display:grid;gap:3px}.image-batch-head span{color:#61708a;font-size:13px}.image-batch-head strong{font-size:20px;color:#315cce}.image-batch-panel progress{display:block;width:100%;height:12px;margin:12px 0;border:0;border-radius:999px;overflow:hidden}.image-batch-counts{display:flex;gap:8px;flex-wrap:wrap}.image-batch-counts span,.file-state{padding:5px 9px;border-radius:999px;background:#edf2fb;color:#465b79;font-size:12px;font-weight:800}.file-state.running{background:#fff3d8;color:#8a5600}.file-state.success{background:#e4f7ea;color:#176b36}.file-state.failed{background:#fde7ea;color:#a12e40}.file>span:first-child{display:grid;gap:3px;min-width:0}.file>span:first-child b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file>span:first-child small{color:#69778d}.file{align-items:center}.file-state{margin-left:auto}.file button{flex:0 0 auto}@media(max-width:760px){.image-batch-head{align-items:flex-start}.file{display:grid;grid-template-columns:minmax(0,1fr) auto}.file-state{margin:0}.file button{grid-column:1/-1;width:100%}}


/* v4.16.0 visual option clarity and shared live preview */
.options input[type="color"]{height:44px;padding:4px;cursor:pointer;background:#fff}.color-choice{display:flex;align-items:center;gap:9px;min-height:32px;padding:6px 9px;border:1px solid #ccd7ea;border-radius:10px;background:#fff;color:#263a5d;font:700 13px ui-monospace,SFMono-Regular,Consolas,monospace}.color-choice i{width:22px;height:22px;border:1px solid #9aa9c0;border-radius:6px;box-shadow:inset 0 0 0 2px #fff}.image-live-preview{margin:18px 0;padding:16px;border:1px solid #cfdcf2;border-radius:16px;background:#fbfcff}.image-live-preview__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.image-live-preview__head div{display:grid;gap:4px}.image-live-preview__head span{color:#62718a;font-size:13px}.image-live-preview__head strong{padding:5px 9px;border-radius:999px;background:#edf3ff;color:#315cce;font-size:12px}.image-live-preview__stage{display:grid;place-items:center;min-height:260px;padding:14px;overflow:auto;border:1px dashed #a9bce0;border-radius:14px;background:linear-gradient(45deg,#e8edf5 25%,transparent 25%) 0 0/20px 20px,linear-gradient(45deg,transparent 75%,#e8edf5 75%) 0 0/20px 20px,#fff}.image-live-preview__stage img{display:block;max-width:100%;max-height:440px;object-fit:contain;box-shadow:0 8px 24px rgba(26,45,83,.14)}.image-live-preview__stage p{max-width:420px;text-align:center;color:#68768c}.image-live-preview__meta{margin-top:10px;color:#53627a;font-size:13px;overflow-wrap:anywhere}@media(max-width:760px){.image-live-preview__head{display:grid}.image-live-preview__stage{min-height:220px}.image-live-preview__stage img{max-height:340px}}

/* v4.22.0 shared original/result comparison */
.image-compare-preview{--cm-preview-zoom:1;margin:18px 0;padding:16px;border:1px solid #cfdcf2;border-radius:16px;background:#fbfcff}.image-compare-preview__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.image-compare-preview__head div{display:grid;gap:4px}.image-compare-preview__head span{color:#62718a;font-size:13px}.image-compare-preview__head strong{padding:5px 9px;border-radius:999px;background:#edf3ff;color:#315cce;font-size:12px}.image-compare-preview__toolbar{display:flex;align-items:end;gap:9px;flex-wrap:wrap;margin-bottom:12px}.image-compare-preview__toolbar>label{display:grid;gap:5px;font-size:12px;font-weight:800;color:#53627a}.image-compare-preview__toolbar select{min-width:210px;max-width:360px;padding:8px 10px;border:1px solid #ccd7ea;border-radius:9px;background:#fff}.image-compare-preview__buttons{display:flex;gap:6px}.image-compare-preview .mini-btn.active{border-color:#315cce;background:#eaf1ff;color:#234aab}.image-preview-zoom{min-width:190px}.image-preview-zoom input{width:150px}.image-compare-stage{position:relative;display:grid;place-items:center;min-height:330px;padding:18px;overflow:auto;border:1px dashed #a9bce0;border-radius:14px;background:#fff}.image-compare-stage.checker{background:linear-gradient(45deg,#e7ecf4 25%,transparent 25%) 0 0/20px 20px,linear-gradient(45deg,transparent 75%,#e7ecf4 75%) 0 0/20px 20px,#fff}.image-compare-slider{position:relative;display:none;max-width:none;max-height:none;transform:scale(var(--cm-preview-zoom));transform-origin:center}.image-compare-stage[data-view="slider"] .image-compare-slider{display:block}.image-compare-layer{position:relative;display:grid;place-items:center}.image-compare-layer img{display:block;max-width:min(760px,75vw);max-height:520px;object-fit:contain;box-shadow:0 8px 24px rgba(26,45,83,.16)}.image-compare-layer span{position:absolute;top:9px;left:9px;padding:5px 8px;border-radius:999px;background:rgba(18,30,52,.78);color:#fff;font-size:12px;font-weight:800}.image-compare-result{position:absolute;inset:0;overflow:hidden}.image-compare-result img{max-width:none;width:100%;height:100%;object-fit:contain}.image-compare-result span{left:auto;right:9px}.image-compare-slider>input[type="range"]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:.001;cursor:ew-resize}.image-compare-slider::after{content:"";position:absolute;top:0;bottom:0;left:var(--cm-divider,50%);width:3px;transform:translateX(-1px);background:#fff;box-shadow:0 0 0 1px rgba(20,40,80,.35);pointer-events:none}.image-compare-side{display:none;grid-template-columns:repeat(2,minmax(280px,1fr));gap:14px;width:max-content;transform:scale(var(--cm-preview-zoom));transform-origin:center}.image-compare-stage[data-view="side"] .image-compare-side{display:grid}.image-compare-side figure{margin:0;display:grid;gap:7px}.image-compare-side figcaption{font-weight:800;color:#294986}.image-compare-side img{display:block;max-width:min(500px,40vw);max-height:500px;object-fit:contain;box-shadow:0 8px 24px rgba(26,45,83,.16)}.image-compare-stage:not(.ready) .image-compare-slider,.image-compare-stage:not(.ready) .image-compare-side{display:none}.image-compare-stage>p{max-width:420px;text-align:center;color:#68768c}.result-item__actions{display:flex;gap:8px;flex-wrap:wrap}.result-item__actions .btn{flex:1 1 100px}.image-compare-preview__toolbar output{font-weight:800;color:#315cce}@media(max-width:760px){.image-compare-preview__head{display:grid}.image-compare-preview__toolbar{align-items:stretch}.image-compare-preview__toolbar>label,.image-compare-preview__toolbar select,.image-preview-zoom{width:100%;max-width:none}.image-compare-preview__buttons{width:100%}.image-compare-preview__buttons button{flex:1}.image-compare-stage{min-height:260px;padding:10px}.image-compare-layer img{max-width:82vw;max-height:400px}.image-compare-side{grid-template-columns:1fr;width:auto}.image-compare-side img{max-width:82vw;max-height:360px}}