/* imgtool/static/imgtool/styles.css */

/* 업로드 박스 */
.upload-box{
  border:2px dashed var(--border);
  border-radius:12px; padding:24px; text-align:center;
  background:#fafbff; color:#374151;
  transition: transform .2s ease, background .2s ease, opacity .2s;
}
.upload-box.dragover{ background:#eef2ff; transform: scale(1.01); }
.upload-box.hidden{ display:none; }

/* 미리보기 */
.preview{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.preview.hidden{ display:none; }

.canvas-wrap{
  position: relative;
  display: inline-block;
  max-width: 100%;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.canvas-wrap img{
  display:block;
  max-width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* 크롭 오버레이 */
.cropper{ position:absolute; inset:0; cursor:crosshair; }
.cropper.hidden{ display:none; }
.crop-border{
  position:absolute;
  border:2px solid #4f46e5;
  box-shadow:0 0 0 9999px rgba(0,0,0,.35);
}
.handle{
  position:absolute; width:14px; height:14px;
  border-radius:50%; background:#4f46e5; border:2px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.handle.tl{ top:-7px; left:-7px; cursor:nwse-resize; }
.handle.tr{ top:-7px; right:-7px; cursor:nesw-resize; }
.handle.bl{ bottom:-7px; left:-7px; cursor:nesw-resize; }
.handle.br{ bottom:-7px; right:-7px; cursor:nwse-resize; }

.crop-controls{
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
}
.custom-size{ display:flex; gap:12px; }
.custom-size input{ width:110px; }

.opt-label{ font-size:12px; color:#6b7280; margin-bottom:6px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:#f5f7ff; padding:6px 10px; border-radius:999px; cursor:pointer; user-select:none; }
.chip input{ accent-color:#4f46e5; }

.opt-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.select{ width:100%; padding:8px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.actions{ margin-top:16px; display:flex; justify-content:center; }
.btn-primary{
  border:1px solid var(--border); border-radius:999px; background:#f5f7ff;
  color:#1f2a5a; font-weight:700; padding:10px 18px; cursor:pointer;
}

@media (max-width:720px){
  .opt-grid{ grid-template-columns: 1fr; }
  .custom-size input{ width:96px; }
}