:root {
  color-scheme: dark;
  --bg: #090c10;
  --panel: #11161d;
  --panel-2: #171d26;
  --line: #29313d;
  --text: #edf2f7;
  --muted: #8f9baa;
  --accent: #4da3ff;
  --accent-2: #2d7dd2;
  --danger: #ff5d5d;
  --success: #4acb81;
  --warning: #f3b44b;
  --font: Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; background: var(--bg); color: var(--text); font-family: var(--font); }
button, input, select { font: inherit; }
button { color: inherit; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 0 clamp(16px, 3vw, 36px); border-bottom: 1px solid var(--line); background: rgba(9,12,16,.92); backdrop-filter: blur(12px); }
.app-title { margin: 0; font-size: clamp(1rem, 2vw, 1.35rem); }
.local-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(74,203,129,.32); border-radius: 999px; background: rgba(74,203,129,.08); color: #8be9b3; font-size: .78rem; }
.app-layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0,1fr) minmax(300px, 360px); gap: 14px; min-height: calc(100vh - 72px); padding: 14px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.panel-header h2 { margin: 0; font-size: .88rem; }
.panel-body { padding: 14px; }
.stack { display: grid; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > span, .field-label { color: var(--muted); font-size: .74rem; font-weight: 650; letter-spacing: .05em; }
input[type="text"], input[type="number"], select { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; outline: 0; background: #0d1218; color: var(--text); }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(77,163,255,.12); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.check { display: inline-flex; align-items: center; gap: 8px; color: #cbd5df; font-size: .84rem; }
.check input { accent-color: var(--accent); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: #202834; color: var(--text); font-weight: 650; font-size: .8rem; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.button:hover { background: #2a3543; border-color: #465366; }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--accent-2); border-color: var(--accent-2); }
.button.primary:hover { background: var(--accent); }
.button.danger { color: #ffb0b0; }
.button:disabled { opacity: .46; cursor: not-allowed; }
.drop-zone { display: grid; place-items: center; min-height: 132px; padding: 20px; border: 1px dashed #4b586b; border-radius: 10px; background: #0d1218; color: var(--muted); text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.drop-zone.is-over { border-color: var(--accent); background: rgba(77,163,255,.08); }
.drop-zone strong { display: block; margin-bottom: 7px; color: var(--text); }
.file-list { display: grid; gap: 7px; max-height: calc(100vh - 330px); overflow: auto; margin-top: 12px; }
.file-item { display: grid; grid-template-columns: 48px minmax(0,1fr) 30px; gap: 9px; align-items: center; padding: 8px; border: 1px solid transparent; border-radius: 8px; background: #0d1218; cursor: pointer; }
.file-item.is-active { border-color: var(--accent); background: rgba(77,163,255,.09); }
.file-thumb { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; background: #1c2430; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.file-size { color: var(--muted); font-size: .7rem; }
.file-remove { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.file-remove:hover { background: rgba(255,93,93,.1); color: var(--danger); }
.preview-panel { display: grid; grid-template-rows: auto minmax(400px,1fr) auto; }
.preview-stage { position: relative; display: grid; place-items: center; min-height: 520px; overflow: hidden; background-color: #080a0d; background-image: linear-gradient(45deg,#11161c 25%,transparent 25%),linear-gradient(-45deg,#11161c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#11161c 75%),linear-gradient(-45deg,transparent 75%,#11161c 75%); background-size: 24px 24px; background-position: 0 0,0 12px,12px -12px,-12px 0; }
.preview-canvas { display: block; max-width: none; max-height: none; touch-action: none; cursor: grab; }
.preview-canvas:active { cursor: grabbing; }
.preview-empty { color: var(--muted); text-align: center; }
.preview-toolbar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-top: 1px solid var(--line); background: var(--panel-2); }
.preview-count { min-width: 100px; color: var(--muted); text-align: center; font-size: .8rem; }
.control-section { padding: 14px 0; border-bottom: 1px solid var(--line); }
.control-section:first-child { padding-top: 0; }
.control-section:last-child { border-bottom: 0; }
.control-section h3 { margin: 0 0 12px; font-size: .82rem; }
.two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.segmented { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #0d1218; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: grid; place-items: center; min-height: 34px; border-radius: 6px; color: var(--muted); font-size: .76rem; cursor: pointer; }
.segmented input:checked + span { background: #283445; color: #fff; }
.watermark-drop { min-height: 74px; }
.output-list { display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.output-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #0d1218; }
.output-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.progress { height: 8px; overflow: hidden; border-radius: 999px; background: #0d1218; }
.progress > span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .18s ease; }
.notice { padding: 11px 12px; border: 1px solid rgba(77,163,255,.25); border-radius: 8px; background: rgba(77,163,255,.07); color: #b9dafe; font-size: .76rem; line-height: 1.55; }
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); opacity: 0; visibility: hidden; transition: .18s ease; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal-card { width: min(720px,100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.modal-header, .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-footer { border-top: 1px solid var(--line); border-bottom: 0; }
.modal-body { padding: 16px; }
.metadata-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.mobile-warning { display: none; margin: 12px; padding: 12px; border: 1px solid rgba(243,180,75,.35); border-radius: 9px; background: rgba(243,180,75,.08); color: #ffd894; }
@media (max-width: 1180px) { .app-layout { grid-template-columns: 300px minmax(0,1fr); } .controls-panel { grid-column: 1 / -1; } .controls-panel .panel-body { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; } .control-section { border-bottom: 0; border-right: 1px solid var(--line); padding: 0 16px 0 0; } .control-section:last-child { border-right: 0; } }
@media (max-width: 780px) { .mobile-warning { display: block; } .app-header { align-items: flex-start; flex-direction: column; padding: 14px 16px; } .app-layout { display: block; padding: 8px; } .panel { margin-bottom: 8px; } .preview-stage { min-height: 58vh; } .preview-canvas { max-height: 56vh; } .controls-panel .panel-body { display: block; } .control-section { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line); } .file-list { max-height: 260px; } .metadata-grid { grid-template-columns: 1fr; } }

.ratio-mode-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.border-color-field { display: grid; gap: 7px; transition: opacity .18s ease; }
.border-color-field.is-disabled, .border-size-field.is-disabled { opacity: .42; }
.target-size-field{padding:10px 12px;border:1px solid transparent;border-radius:9px;transition:opacity .18s ease,background .18s ease,border-color .18s ease}
.target-size-field.is-disabled{opacity:.46;background:#edf1f5;border-color:#e1e6eb;color:#929ca7}
.target-size-field.is-disabled>span{color:#929ca7}
.target-size-field.is-disabled input{background:#e7ebef;color:#9aa3ad;border-color:#d7dde3}
.border-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preview-canvas { width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 34px rgba(0,0,0,.36); }

/* Matchcamera light theme */
:root{color-scheme:light;--bg:#f4f7fb;--panel:#fff;--panel-2:#f8fafc;--line:#dce3ea;--text:#17202a;--muted:#6f7d8a;--accent:#685cf5;--accent-2:#08a6c7;--danger:#e5484d;--success:#159a73;--warning:#d38a19}
.resize-page{background:var(--bg);color:var(--text)}
.resize-main{min-height:calc(100vh - 74px)}
.resize-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px max(22px,calc((100vw - 1780px)/2));border-bottom:1px solid var(--line);background:linear-gradient(120deg,#eef7ff,#f5f1ff)}
.resize-hero span{color:#087e9d;font-size:11px;font-weight:900;letter-spacing:.12em}.resize-hero h1{margin:8px 0 6px;font-size:29px}.resize-hero p{margin:0;color:#647181}.resize-hero>strong{padding:10px 14px;border:1px solid #cbdce8;border-radius:999px;background:#fff;color:#087a63;font-size:12px}
.app-layout{grid-template-columns:minmax(280px,330px) minmax(520px,1fr) minmax(350px,410px);max-width:1900px;min-height:calc(100vh - 190px);margin:auto}
.panel{box-shadow:0 4px 18px rgba(30,47,66,.05)}
.panel-header,.preview-toolbar{background:#f8fafc}.panel-header h2,.control-section h3{color:#15202b}
input[type="text"],input[type="number"],select,.drop-zone,.file-item,.segmented,.output-item,.progress{background:#fff;color:var(--text)}
.drop-zone{border-color:#bdc9d5}.drop-zone.is-over{background:#f1efff}.drop-zone strong{color:var(--text)}
.file-item{border-color:#e6ebf0}.file-item.is-active{border-color:var(--accent);background:#f1efff}.file-thumb{background:#eef2f6}
.check{color:#34404c}.button{background:#fff;color:#27323d;border-color:#cbd5df}.button:hover{background:#f3f8fb;border-color:#8ca5b7}.button.primary{color:#fff;background:linear-gradient(135deg,var(--accent-2),var(--accent));border:0}.button.danger{color:#c5343d}
.segmented input:checked+span{background:linear-gradient(135deg,#16a8c5,#6a5cf4);color:#fff}.segmented span{color:#687683}.notice{border-color:#c9e3ec;background:#f2fbfd;color:#3d6572}
.preview-stage{background-color:#e9eef3;background-image:linear-gradient(45deg,#f8fafc 25%,transparent 25%),linear-gradient(-45deg,#f8fafc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f8fafc 75%),linear-gradient(-45deg,transparent 75%,#f8fafc 75%)}
.progress>span{background:linear-gradient(90deg,var(--accent-2),var(--accent))}.progress-text{color:var(--muted);font-size:.75rem}
.equipment-section{background:linear-gradient(140deg,rgba(8,166,199,.035),rgba(104,92,245,.04));margin-inline:-14px;padding-inline:14px}.equipment-detected{padding:10px;border:1px solid #dbe7ed;border-radius:8px;background:#f7fafc;color:#62717f;font-size:.72rem;line-height:1.5}.segmented.four{grid-template-columns:repeat(4,1fr)}
.modal{background:rgba(25,31,39,.68)}.modal-card{box-shadow:0 24px 70px rgba(12,22,35,.25)}
@media(max-width:1360px){.app-layout{grid-template-columns:280px minmax(460px,1fr) 360px}}
@media(max-width:1180px){.app-layout{grid-template-columns:300px minmax(0,1fr)}.controls-panel .panel-body{grid-template-columns:repeat(2,minmax(0,1fr))}.control-section{border-right:0;border-bottom:1px solid var(--line);padding:14px}.equipment-section{margin:0}.controls-panel{grid-column:1/-1}}
@media(max-width:780px){.resize-hero{padding:23px 16px;align-items:flex-start;flex-direction:column}.resize-hero h1{font-size:23px}.app-layout{display:block;padding:8px}.controls-panel .panel-body{display:block}.equipment-section{padding:14px 0;background:transparent}.preview-stage{min-height:55vh}}

/* Resize preview uses a stable frame; the renderer sizes the canvas and drag coordinates. */
.resize-preview-panel{grid-template-rows:auto auto auto;align-content:start;align-self:start}
[data-preview-stage]{height:clamp(280px,55vh,600px);min-height:0;border-radius:10px;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
[data-preview-stage]:has([data-preview-canvas][hidden]){background:#f6f8fc}
[data-preview-canvas]{max-height:none;box-shadow:0 4px 18px rgba(30,45,65,.14)}
[data-preview-canvas][hidden],[data-preview-empty][hidden]{display:none!important}
[data-preview-empty]{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:320px;margin:0;padding:32px 20px;text-align:center;color:#788599;line-height:1.6;word-break:keep-all}
[data-preview-empty] strong{font-size:16px;font-weight:600;color:#46566d}
[data-preview-empty] span{font-size:13px}
@media(max-width:780px){[data-preview-stage]{height:clamp(240px,45vh,420px);min-height:0}}

/* Width-based layouts for phones, unfolded screens and small tablets. */
.resize-main,.resize-hero>div,.resize-hero>strong{min-width:0}
.resize-hero p,.resize-hero>strong,.equipment-detected,.notice,.progress-text{overflow-wrap:anywhere}
.resize-hero>strong{max-width:100%;line-height:1.6}
.program-jump-links{display:none}
.resize-main [id^="program-"]{scroll-margin-top:100px}
.resize-main .file-item>div,.resize-main .output-item{min-width:0}
.resize-main .button:focus-visible,.resize-main .file-remove:focus-visible,.program-jump-links a:focus-visible{outline:3px solid #a49dfa;outline-offset:2px}
.resize-main .segmented input:focus-visible+span{outline:3px solid #a49dfa;outline-offset:1px}
@media(max-width:1180px){
  .resize-hero{padding:24px 16px;gap:16px;align-items:flex-start;flex-wrap:wrap}
  .resize-hero>div{flex:1 1 400px}
  .resize-hero h1{font-size:clamp(22px,3.4vw,29px);line-height:1.4;overflow-wrap:anywhere}
  .resize-hero p{font-size:14px;line-height:1.7}
  .program-jump-links{display:flex;flex-wrap:wrap;gap:8px;padding:12px 12px 0;max-width:1900px;margin:auto}
  .program-jump-links a{display:flex;align-items:center;justify-content:center;flex:1 1 90px;min-height:44px;padding:8px 12px;border:1px solid #d9deeb;border-radius:10px;background:#fff;color:#4e4aaf;font-size:13px;font-weight:700;text-decoration:none;text-align:center}
  .resize-main .app-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);grid-template-areas:"files files" "preview controls";gap:12px;padding:12px;min-height:0;align-items:start}
  .resize-main .files-panel{grid-area:files}
  .resize-main .preview-panel{grid-area:preview;grid-template-rows:auto auto auto;align-content:start;position:sticky;top:96px}
  .resize-main .controls-panel{grid-area:controls;grid-column:auto}
  .resize-main .panel{margin:0}
  .resize-main .panel-header{gap:8px;padding:10px 12px;flex-wrap:wrap}
  .resize-main .panel-body{padding:12px}
  .resize-main .files-panel .panel-body{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:12px;align-items:start}
  .resize-main .files-panel .panel-body:has(.file-list:empty){grid-template-columns:minmax(0,1fr)}
  .resize-main .file-list{margin-top:0;max-height:190px;overscroll-behavior:contain}
  .resize-main .file-list:empty{display:none}
  .resize-main .controls-panel .panel-body{display:block}
  .resize-main .control-section{padding:16px 0;border-right:0;border-bottom:1px solid var(--line)}
  .resize-main .control-section:first-child{padding-top:0}
  .resize-main .control-section:last-child{border-bottom:0}
  .resize-main .equipment-section{margin:0;background:transparent}
  .resize-main .button{min-height:44px;line-height:1.4;padding:9px 12px}
  .resize-main .check{min-height:40px;line-height:1.5;cursor:pointer}
  .resize-main .check input{width:18px;height:18px;flex:0 0 18px}
  .resize-main input[type="text"],.resize-main input[type="number"],.resize-main select,.resize-main textarea{min-width:0;min-height:44px;font-size:16px}
  .resize-main input[type="range"]{min-width:0;min-height:36px}
  .resize-main .segmented{grid-template-columns:repeat(2,minmax(0,1fr))}
  .resize-main .segmented.four{grid-template-columns:repeat(4,minmax(0,1fr))}
  .resize-main .segmented span{min-height:44px;padding:6px 3px;line-height:1.4}
  .resize-main .file-item{grid-template-columns:44px minmax(0,1fr) 44px;padding:6px;gap:8px}
  .resize-main .file-thumb{width:44px;height:44px}
  .resize-main .file-remove{width:44px;height:44px;font-size:20px}
  .resize-main .output-item{flex-wrap:wrap;gap:8px}
  .resize-main .output-item>span{flex:1 1 110px}
  .resize-main .output-item .button{flex-shrink:0}
  .resize-main .preview-toolbar{gap:6px;padding:10px 8px}
  .resize-main .preview-count{min-width:0;flex:1;font-size:12px}
  .resize-main [data-preview-stage]{height:clamp(250px,48vh,500px);height:clamp(250px,48svh,500px);min-height:0}
  .resize-main [data-preview-empty]{padding:24px 16px;max-width:100%}
  .resize-page .modal{padding:12px}
  .resize-page .modal-card{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  .resize-page .modal-header,.resize-page .modal-footer{flex-wrap:wrap;padding:12px;gap:8px}
  .resize-page .modal .button{min-height:44px}
  .resize-page .modal .check{min-height:40px;line-height:1.5}
}
@media(max-width:599px){
  .resize-hero{padding:20px 12px}
  .resize-hero>div{flex-basis:auto}
  .resize-hero>strong{border-radius:12px;font-size:11px;padding:8px 10px}
  .resize-main .app-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"files" "preview" "controls";padding:10px;gap:12px}
  .resize-main .preview-panel{position:static}
  .resize-main .files-panel .panel-body{display:block}
  .resize-main .file-list{margin-top:12px;max-height:220px}
  .resize-main .drop-zone{min-height:116px;padding:16px}
  .resize-main [data-preview-stage]{height:clamp(220px,44vh,400px);height:clamp(220px,44svh,400px)}
  .resize-main .preview-toolbar .button{padding-inline:10px}
  .resize-main .controls-panel .row.wrap>.button{flex:1 1 120px}
  .resize-main .controls-panel .control-section h3{font-size:14px}
  .resize-page .mobile-warning{font-size:12px;line-height:1.6}
}
@media(max-width:380px){.resize-main .two-col{grid-template-columns:minmax(0,1fr)}}
@media(max-height:600px){.resize-main .preview-panel{position:static}}