.filename-layout #drop{width:100%;font:inherit;color:inherit;background:transparent}.filename-layout .preview-stage{min-height:300px}.filename-layout #preview{touch-action:none;cursor:crosshair}.filename-layout #previewName{max-width:60%;overflow-wrap:anywhere;font-size:12px}.filename-hint{padding:12px;color:#657080;font-size:12px}.filename-layout #fileList button{display:block;width:100%;padding:10px;text-align:left;border:1px solid #e4e7ee;border-radius:8px;background:#fff;margin-top:6px;overflow-wrap:anywhere}.filename-layout #fileList button[aria-pressed=true]{border-color:#7367ef;background:#f1efff}.filename-layout #outputs a{display:block;overflow-wrap:anywhere;padding:8px 0}.filename-layout .field{min-width:0}.filename-layout #status{font-size:13px;overflow-wrap:anywhere}
/* Keep the canvas inside the preview frame without overriding hidden states. */
.filename-layout .preview-stage{display:flex;align-items:center;justify-content:center;height:clamp(280px,55vh,600px);min-height:0;padding:24px;box-sizing:border-box;border-radius:10px;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.filename-layout .preview-stage:has(#preview[hidden]){background:#f6f8fc}
.filename-layout #preview{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;flex:0 1 auto;box-shadow:0 4px 18px rgba(30,45,65,.14)}
.filename-layout #preview[hidden],.filename-layout #empty[hidden]{display:none!important}
.filename-layout #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}
.filename-layout #empty strong{font-size:16px;font-weight:600;color:#46566d}
.filename-layout #empty span{font-size:13px}
@media(max-width:780px){.filename-layout .preview-stage{height:clamp(240px,45vh,420px);padding:16px}}
.resize-page{font-family:Arial,"Malgun Gothic",sans-serif}

.filename-layout .preview-panel{grid-template-rows:auto auto auto;align-content:start;align-self:start}
.filename-layout .filename-hint{margin:0;line-height:1.7;overflow-wrap:anywhere}
@media(max-width:1180px){
  .filename-layout .preview-stage{height:clamp(250px,48vh,500px);height:clamp(250px,48svh,500px);padding:16px}
  .filename-layout .controls-panel .panel-body.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
  .filename-layout #fileList button{min-height:52px;margin:0;font-size:13px;line-height:1.5}
  .filename-layout #previewName{max-width:65%;min-width:0;line-height:1.5}
  .filename-layout #outputs a{min-height:44px;padding:12px 0;line-height:1.5}
  .filename-layout #empty{max-width:100%;padding:20px 10px}
}
@media(max-width:599px){
  .filename-layout .preview-stage{height:clamp(220px,44vh,400px);height:clamp(220px,44svh,400px);padding:12px}
  .filename-layout #previewName{max-width:68%;font-size:11px}
  .filename-layout .filename-hint{padding:12px;font-size:12px}
}