/* 도구 페이지 공용 스타일 (style.css 의 토큰 사용) */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav a[aria-current=page]{color:#fff;background:var(--ink-3)}
.nav{flex-wrap:wrap;justify-content:flex-end}
.tool-hero{padding:46px 0 26px;background:radial-gradient(760px 300px at 85% 0,rgba(255,90,54,.14),transparent 62%),var(--ink);border-bottom:1px solid var(--line)}
.tool-hero.compact{padding:30px 0 18px}
.tool-hero h1{font-size:clamp(30px,4.2vw,48px);margin:6px 0 10px;letter-spacing:-.03em}
.tool-hero .lede{margin:0;max-width:40em}
.tool{padding-top:26px;padding-bottom:84px}
.tool a{color:var(--onion)}

.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:260px;padding:30px 22px;border:2px dashed #3a4050;border-radius:18px;background:var(--ink-2);cursor:pointer;transition:border-color .15s,background .15s}
.drop b{font-size:20px;letter-spacing:-.01em}.drop span{color:var(--muted);font-size:15px;max-width:40em}
.drop:hover,.drop.over{border-color:var(--accent);background:rgba(255,90,54,.06)}
.drop[hidden],#work[hidden]{display:none}

.grid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.grid2.wide-left{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:20px;min-width:0}
.panel+.panel,#prog+.panel{margin-top:18px}
.ph{font-size:17px;margin:0 0 14px;letter-spacing:-.01em;font-weight:800}
.hint{color:var(--muted);font-size:13.5px;margin:10px 0 0;line-height:1.55}
.hint.warn{color:#ffb35c}
.meta{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.grow{flex:1}

.fld{display:block;margin:0 0 14px;min-width:0}
.fld>span,.fld>label{display:block;font-size:13.5px;color:#b5b9c7;margin-bottom:6px}
.fld b{color:#fff;font-family:var(--mono)}
.fld small{color:var(--muted)}
.fields{display:grid;gap:0 14px}
.fields.two{grid-template-columns:1fr 1fr}.fields.four{grid-template-columns:repeat(4,1fr);gap:8px}
.fields.four label{font-size:12px;color:var(--muted);display:block}
input[type=number],input[type=text],select,textarea{width:100%;background:#0f1117;color:#eceef5;border:1px solid #333948;border-radius:9px;padding:10px 11px;font:inherit;font-size:15px;min-width:0}
textarea{resize:vertical}
input[type=color]{width:100%;height:42px;padding:3px;background:#0f1117;border:1px solid #333948;border-radius:9px}
input[type=range]{width:100%;accent-color:var(--accent)}
select:focus,input:focus,textarea:focus{border-color:var(--onion);outline:none}
.pair{display:grid;grid-template-columns:1fr 90px;gap:10px;align-items:center}
.pair input[type=number],.pair button{width:100%}
.pair3{display:grid;grid-template-columns:1fr auto 1fr auto;gap:8px;align-items:center}.pair3 i{font-style:normal;color:var(--muted)}
.chk{display:flex!important;align-items:center;gap:8px;margin:8px 0 0;color:#b5b9c7;font-size:14px}.chk input{width:17px;height:17px;accent-color:var(--accent)}

.btn.small{padding:8px 13px;font-size:14px;border-radius:9px}
.btn.wide{width:100%;justify-content:center;margin-top:8px}
.btn.icon{padding:0;width:34px;height:34px;justify-content:center;border-radius:8px;background:var(--ink-3);color:#dfe2ec;border-color:var(--line)}
.btn.icon.small{width:30px;height:30px;font-size:12px}
.btn.danger{color:#ff8f7a}.btn.icon.danger{color:#ff8f7a}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}

.vwrap{background:#000;border-radius:12px;overflow:hidden;display:flex;justify-content:center;margin-bottom:14px;max-height:56vh}
.vwrap video,.vwrap img{max-width:100%;max-height:56vh;display:block}
.progress{margin-top:18px;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.progress .bar{height:8px;background:#0f1117;border-radius:99px;overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .15s}
.progress .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;font-size:14px;color:#b5b9c7}
.progress[hidden]{display:none}

.result .rgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
.rimg{background:repeating-conic-gradient(#1a1d25 0 25%,#13151b 0 50%) 0 0/20px 20px;border-radius:12px;padding:10px;display:flex;justify-content:center;min-width:0}
.rimg img,.rimg video{max-width:100%;max-height:60vh;display:block}
.rinfo p{font-family:var(--mono);font-size:13.5px;color:#cfd3df;line-height:1.7;margin:0 0 6px;word-break:break-word}
.log{list-style:none;padding:0;margin:8px 0;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.log li{padding:2px 0}

.seg{display:flex;gap:6px;margin-bottom:16px;background:#0f1117;border-radius:10px;padding:4px}
.seg label{flex:1}.seg input{position:absolute;opacity:0}
.seg span{display:block;text-align:center;padding:9px 6px;border-radius:7px;font-size:14px;cursor:pointer;color:#b5b9c7}
.seg input:checked+span{background:var(--ink-3);color:#fff;font-weight:700;box-shadow:0 0 0 1px var(--accent) inset}

/* 이미지 목록 */
.listhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.flist{list-style:none;margin:10px 0 0;padding:0;max-height:62vh;overflow:auto;display:grid;gap:6px}
.flist li{display:grid;grid-template-columns:20px 72px minmax(0,1fr) 78px auto auto auto;gap:8px;align-items:center;background:#13151c;border:1px solid var(--line);border-radius:10px;padding:6px 8px}
.flist li.dragging{opacity:.4}.flist li.dropat{border-color:var(--accent)}
.flist .grip{color:var(--muted);cursor:grab;text-align:center}
.flist canvas{border-radius:4px;background:#000;max-width:72px}
.flist .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.flist input{padding:6px 7px;font-size:14px}.flist small{color:var(--muted);margin-left:-4px}
.flist li small{display:none}

/* 편집기 */
.ebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.egrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.stage-panel{padding:14px;position:sticky;top:76px}
.player .pstage{position:relative;text-align:center;line-height:0;background:repeating-conic-gradient(#1a1d25 0 25%,#13151b 0 50%) 0 0/20px 20px;border-radius:10px;padding:8px;min-height:120px}
.player canvas{max-width:100%;max-height:56vh;min-width:min(100%,340px);display:inline-block;vertical-align:top}
.player .overlay{position:absolute;inset:8px;pointer-events:none}
.crop{position:absolute;border:2px solid var(--accent);background:rgba(255,90,54,.12);box-shadow:0 0 0 9999px rgba(0,0,0,.45);pointer-events:auto;cursor:move;touch-action:none}
.crop[hidden]{display:none}
.crop .hd{position:absolute;width:16px;height:16px;background:var(--accent);border:2px solid #fff;border-radius:50%}
.crop .nw{left:-9px;top:-9px;cursor:nwse-resize}.crop .ne{right:-9px;top:-9px;cursor:nesw-resize}.crop .sw{left:-9px;bottom:-9px;cursor:nesw-resize}.crop .se{right:-9px;bottom:-9px;cursor:nwse-resize}
.pbar{display:flex;align-items:center;gap:12px;margin-top:10px}
.pbar .scrub{flex:1}.plabel{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:110px;text-align:right}
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin:-4px 0 14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.tabs button{background:none;border:0;color:#b5b9c7;font:inherit;font-size:14.5px;padding:8px 12px;border-radius:8px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--ink-3);color:#fff;font-weight:700}
.tabpanel[hidden]{display:none}
.tlpanel{margin-top:18px}
.tlhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tl{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 12px;outline:none}
.tl:focus-visible{outline:2px solid var(--onion);border-radius:8px}
.tf{flex:none;position:relative;width:96px;border:2px solid transparent;border-radius:9px;background:#13151c;padding:4px;cursor:pointer;user-select:none}
.tf canvas{display:block;width:100%;height:auto;border-radius:5px;background:repeating-conic-gradient(#222633 0 25%,#181b24 0 50%) 0 0/10px 10px;pointer-events:none}
.tf b{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.7);color:#fff;font:700 11px var(--mono);padding:1px 6px;border-radius:5px}
.tf small{display:block;text-align:center;font:11px var(--mono);color:var(--muted);margin-top:3px}
.tf.sel{border-color:var(--onion);background:#10222b}
.tf.cur{box-shadow:0 0 0 2px var(--accent)}
.tf.dropat{border-color:var(--lime)}
#xGo{margin-top:14px}.xopts[hidden]{display:none}

#toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:90;width:min(92vw,520px)}
.toast{background:#242834;border:1px solid #3a4050;border-radius:11px;padding:12px 16px;font-size:14.5px;box-shadow:0 12px 30px -10px #000;transition:opacity .4s}
.toast.error{border-color:#ff6a4d;background:#2c1a17}.toast.out{opacity:0}

@media (max-width:980px){
  .grid2,.grid2.wide-left,.egrid,.result .rgrid{grid-template-columns:minmax(0,1fr)}
  .stage-panel{position:static}
}
@media (max-width:560px){
  .tool{padding-bottom:60px}.panel{padding:16px}
  .fields.two{grid-template-columns:1fr}.fields.four{grid-template-columns:1fr 1fr}
  .flist li{grid-template-columns:20px 56px minmax(0,1fr) auto auto auto;}
  .flist li input{grid-column:3/-1;grid-row:2}.flist li small{display:none}
  .flist canvas{max-width:56px}
  .nav a{padding:7px 9px;font-size:13.5px}
  .brand small{display:none}
  .hdr .wrap{height:auto;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
}