:root {
  --bg:      #1a1a1a;
  --panel:   #232323;
  --toolbar: #2a2a2a;
  --hover:   #333;
  --active:  #3a3a3a;
  --input:   #1c1c1c;
  --border:  #383838;
  --blight:  #484848;
  --accent:  #4a9eff;
  --acchov:  #6db8ff;
  --danger:  #e84444;
  --success: #4caf50;
  --text1:   #e8e8e8;
  --text2:   #999;
  --text3:   #666;
  --ptw:     270px;
  --ltw:     46px;
  --tph:     44px;
  --r:       5px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text1);
  font: 12px/1.4 -apple-system, 'Segoe UI', sans-serif; user-select:none; -webkit-font-smoothing:antialiased; }

/* ── TOPBAR ── */
.topbar { position:fixed; top:0; left:0; right:0; height:var(--tph);
  background:var(--toolbar); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 10px; z-index:100; gap:8px; }
.tb-left, .tb-right { display:flex; align-items:center; gap:5px; flex:1; min-width:0; }
.tb-right { justify-content:flex-end; }
.tb-center { display:flex; align-items:center; gap:5px; flex:0 0 auto; }
.logo { display:flex; align-items:center; gap:5px; color:var(--accent); font-weight:700; font-size:12px; margin-right:6px; white-space:nowrap; }
.sep { width:1px; height:18px; background:var(--border); margin:0 2px; flex-shrink:0; }
.home-link {
  display:flex; align-items:center; gap:5px;
  padding:5px 9px; border-radius:6px;
  color:var(--text2); text-decoration:none;
  font-size:11px; font-weight:600; letter-spacing:0.02em;
  background:rgba(74,158,255,0.06);
  border:1px solid rgba(74,158,255,0.18);
  transition:all 0.15s;
  white-space:nowrap; flex-shrink:0;
}
.home-link:hover { background:rgba(74,158,255,0.14); border-color:var(--accent); color:var(--accent2); }
.tbtn { display:flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer;
  color:var(--text2); padding:4px 7px; border-radius:var(--r); font-size:11.5px; transition:background .12s, color .12s;
  white-space:nowrap; flex-shrink:0; }
.tbtn:hover { background:var(--hover); color:var(--text1); }
.tbtn:disabled { opacity:.3; cursor:not-allowed; }
.tbtn-accent { background:var(--accent); color:#fff; font-weight:600; }
.tbtn-accent:hover { background:var(--acchov); color:#fff; }
/* v1.7.12: PPT 워드아트 토글 — PPT 버튼 옆 작은 체크박스 라벨 */
.pptw-toggle { display:inline-flex; align-items:center; gap:4px; padding:0 7px; margin-left:-2px;
  font-size:11px; color:var(--text2); user-select:none; cursor:pointer; white-space:nowrap; }
.pptw-toggle input { margin:0; cursor:pointer; accent-color:var(--accent); }
.pptw-toggle:hover { color:var(--text1); }
.zbtn { background:none; border:none; cursor:pointer; color:var(--text2); padding:3px 7px;
  border-radius:3px; font-size:12px; transition:background .1s, color .1s; }
.zbtn:hover { background:var(--hover); color:var(--text1); }
#zoomLabel { color:var(--text1); font-size:12px; min-width:36px; text-align:center; }
.imgsize { color:var(--text3); font-size:11px; margin-left:6px; }
/* 화면 너비 좁을 때 일부 버튼 텍스트 숨기기 (아이콘만 표시) */
@media (max-width: 1400px) {
  .tbtn { padding:4px 6px; font-size:11px; }
  .logo { font-size:11.5px; }
}
@media (max-width: 1200px) {
  .home-link span,
  .logo { display:none; }
}

/* ── MAIN ── */
.main { position:fixed; top:var(--tph); left:0; right:0; bottom:0; display:flex; }

/* ── LEFT TOOLBAR ── */
.ltool { width:var(--lfw, var(--lfw, 46px)); width:46px; background:var(--toolbar);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  align-items:center; padding:8px 0; gap:2px; flex-shrink:0; }
.tool { width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--text3); border-radius:var(--r);
  transition:background .12s, color .12s; }
.tool:hover { background:var(--hover); color:var(--text1); }
.tool.active { background:var(--accent); color:#fff; }
.tsep { width:26px; height:1px; background:var(--border); margin:4px 0; }
.tool-hint { color:var(--text3); font-size:9px; text-align:center; line-height:1.3; padding:4px 2px; }

/* ── CANVAS AREA ── */
.canvas-area { flex:1; background:#0f0f0f;
  background-image: linear-gradient(45deg,#181818 25%,transparent 25%),
    linear-gradient(-45deg,#181818 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#181818 75%),
    linear-gradient(-45deg,transparent 75%,#181818 75%);
  background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0;
  overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; }
.canvas-area.drag-over { outline:2px solid var(--accent); outline-offset:-2px; }

/* Welcome */
.welcome { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

/* ── 튜토리얼 화살표 (이미지 불러오기 전 좌측 도구 설명) ── */
.tutorial-arrows {
  position:absolute; top:0; left:0; bottom:0; width:340px;
  pointer-events:none; user-select:none;
}
.tutorial-item {
  position:absolute; left:8px; height:34px;
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text2);
  animation:tutorial-fade-in 0.5s ease-out backwards;
}
.tutorial-item.featured {
  color:var(--accent2); font-weight:600;
}
.tutorial-arrow {
  width:34px; height:1.5px; background:var(--text3); opacity:0.5;
  position:relative; flex-shrink:0;
}
.tutorial-arrow::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:0; height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-right:7px solid var(--text3);
  opacity:0.7;
}
.tutorial-item.featured .tutorial-arrow {
  background:var(--accent); opacity:0.8;
}
.tutorial-item.featured .tutorial-arrow::before {
  border-right-color:var(--accent); opacity:1;
}
.tutorial-label {
  background:var(--panel); padding:5px 11px; border-radius:6px;
  border:1px solid var(--border);
  white-space:nowrap; line-height:1.3;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}
.tutorial-item.featured .tutorial-label {
  background:rgba(74,158,255,0.12);
  border-color:rgba(74,158,255,0.4);
}
.tutorial-label small {
  display:block; color:var(--text3); font-size:10px; font-weight:normal;
  margin-top:1px;
}
.tutorial-item.featured .tutorial-label small {
  color:var(--accent2); opacity:0.75;
}
@keyframes tutorial-fade-in {
  from { opacity:0; transform:translateX(-12px); }
  to   { opacity:1; transform:translateX(0); }
}
/* 좁은 화면에서는 튜토리얼 숨김 (welcome 본체와 겹치지 않게) */
@media (max-width: 900px) {
  .tutorial-arrows { display:none; }
}
.wb { text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:360px;
  padding:36px; background:rgba(35,35,35,.85); border:2px dashed var(--border);
  border-radius:14px; backdrop-filter:blur(4px); }
.wb:hover { border-color:var(--accent); }
.wb h2 { font-size:16px; font-weight:600; }
.wb p { color:var(--text2); }
.hint { color:var(--text3) !important; font-size:11px !important; }

/* Canvas wrapper */
.cvs-wrap-outer { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cvs-wrap { position:relative; display:inline-block; line-height:0;
  box-shadow:0 8px 40px rgba(0,0,0,.7); transform-origin:center; }
.cvs-wrap img { display:block; max-width:none; }
.cvs-wrap canvas { position:absolute; inset:0; }

/* Cursors */
.canvas-area.cur-hand    { cursor:grab; }
.canvas-area.cur-hand:active { cursor:grabbing; }
.canvas-area.cur-block   { cursor:none; }
.canvas-area.cur-eye     { cursor:none; }
.canvas-area.cur-select  { cursor:default; }

/* Floating toolbar */
.ftbar { position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  background:var(--toolbar); border:1px solid var(--blight); border-radius:24px;
  padding:8px 18px; display:flex; align-items:center; gap:10px; box-shadow:0 4px 20px rgba(0,0,0,.5); z-index:50; }
.ft-tip { color:var(--accent); font-size:12px; font-weight:500; }

/* ── RIGHT PANEL ── */
.rpanel { width:var(--ptw); background:var(--panel); border-left:1px solid var(--border);
  overflow-y:auto; flex-shrink:0; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.rpanel::-webkit-scrollbar { width:4px; }
.rpanel::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.psec { padding:14px; border-bottom:1px solid var(--border); }
/* v1.7.10: 제목 색을 흰색으로 강조 (사용자 요청 6번 — 설명과 구분 명확화) */
.plabel { font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:#fff; margin-bottom:10px; }
.pdesc { color:var(--text3); font-size:11px; line-height:1.5; margin-bottom:10px; }
.hint-lg { color:var(--text3); font-size:12px; text-align:center; line-height:1.8; padding:20px 0; }

.prop-row { margin-bottom:9px; }
.prop-row label { display:flex; justify-content:space-between; color:var(--text2); font-size:11px; margin-bottom:4px; }
.prop-row input[type="range"] { width:100%; height:3px; appearance:none; background:var(--input);
  border-radius:2px; cursor:pointer; outline:none; border:none; }
.prop-row input[type="range"]::-webkit-slider-thumb { appearance:none; width:13px; height:13px;
  border-radius:50%; background:var(--accent); cursor:pointer; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.two-col > div label { display:block; margin-bottom:4px; }

/* Fill type buttons */
.fill-btns { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:4px; margin-bottom:10px; }
.fbtn { background:var(--input); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text2); padding:6px 4px; cursor:pointer; font-size:11px; font-weight:500;
  transition:background .12s, color .12s, border-color .12s; }
.fbtn:hover { background:var(--hover); color:var(--text1); }
.fbtn.active { background:rgba(74,158,255,.15); border-color:var(--accent); color:var(--accent); }

/* Color row */
.color-row { display:flex; align-items:center; gap:7px; }
.color-row input[type="color"] { width:32px; height:26px; border:1px solid var(--border);
  border-radius:4px; padding:2px; cursor:pointer; background:none; }
.color-row span { color:var(--text2); font-size:11px; font-family:monospace; }
.eye-btn { background:var(--input); border:1px solid var(--border); border-radius:4px;
  cursor:pointer; color:var(--text2); padding:4px 7px; transition:background .1s, color .1s; }
.eye-btn:hover { background:var(--hover); color:var(--accent); }
.eye-btn.picking { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Style/align row */
.style-row { display:flex; align-items:center; gap:4px; }
.sbtn { width:28px; height:26px; display:flex; align-items:center; justify-content:center;
  background:var(--input); border:1px solid var(--border); border-radius:4px; cursor:pointer;
  color:var(--text2); font-size:12px; transition:background .1s, color .1s; }
.sbtn:hover { background:var(--hover); color:var(--text1); }
.sbtn.active { background:rgba(74,158,255,.15); color:var(--accent); border-color:var(--accent); }
.sep-v { width:1px; height:20px; background:var(--border); margin:0 2px; }

/* Text area */
.txt-area { width:100%; background:var(--input); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text1); padding:8px; font-size:13px; resize:vertical; outline:none;
  font-family:inherit; margin-bottom:10px; transition:border-color .15s; }
.txt-area:focus { border-color:var(--accent); }

/* Inputs */
.sel { width:100%; background:var(--input); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text1); padding:5px 8px; cursor:pointer; outline:none; font-size:12px; }
.sel:focus { border-color:var(--accent); }
.num-in { width:100%; background:var(--input); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text1); padding:5px 7px; outline:none; font-size:12px; text-align:center; }
.num-in:focus { border-color:var(--accent); }

/* Action buttons */
.act-btn { width:100%; background:var(--input); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text2); padding:7px 10px; cursor:pointer; font-size:12px;
  display:flex; align-items:center; justify-content:center; gap:5px; margin-top:6px;
  transition:background .12s, color .12s; }
.act-btn:hover { background:var(--hover); color:var(--text1); }
.act-btn.danger { border-color:rgba(232,68,68,.4); color:rgba(232,68,68,.7); }
.act-btn.danger:hover { background:rgba(232,68,68,.12); color:var(--danger); }
.btn-primary { background:var(--accent); color:#fff; border:none; border-radius:var(--r);
  padding:9px 20px; cursor:pointer; font-size:13px; font-weight:600; }
.btn-primary:hover { background:var(--acchov); }

/* Upscale buttons */
.us-res-btns { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:4px; }
.us-res-btn { background:var(--input); border:1px solid var(--border); border-radius:var(--r);
  cursor:pointer; padding:7px 4px; font-size:12px; font-weight:700; color:var(--text2);
  transition:background .12s, border-color .12s, color .12s; }
.us-res-btn:hover { background:var(--hover); border-color:var(--blight); color:var(--text1); }
.us-res-btn.active { background:rgba(74,158,255,.15); border-color:var(--accent); color:var(--accent); }
.us-prog-bar { height:6px; background:var(--input); border-radius:3px; overflow:hidden; }
.us-prog-bar #usProgFill { height:100%; background:var(--accent); border-radius:3px;
  width:0%; transition:width .3s; }

/* Eyedropper indicator */
.eyedrop-indicator { position:fixed; top:calc(var(--tph) + 10px); left:50%; transform:translateX(-50%);
  background:rgba(74,158,255,.9); color:#fff; padding:7px 16px; border-radius:20px;
  font-size:12px; font-weight:500; z-index:200; display:flex; align-items:center; gap:7px;
  box-shadow:0 3px 16px rgba(0,0,0,.4); }

/* Loading */
.loading { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex;
  align-items:center; justify-content:center; z-index:300; }
.loading-box { background:var(--panel); border:1px solid var(--blight); border-radius:10px;
  padding:28px 40px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.spinner { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
#loadingMsg { color:var(--text2); font-size:13px; }

/* Selection handles on canvas (CSS for cursor hints) */
.handle-nw, .handle-ne, .handle-sw, .handle-se { cursor:nwse-resize; }
.handle-n,  .handle-s  { cursor:ns-resize; }
.handle-e,  .handle-w  { cursor:ew-resize; }

/* ── EYEDROPPER MAGNIFIER ── */
.eyedrop-mag {
  position: fixed;
  background: #1a1a1a;
  border: 2px solid rgba(74,158,255,.85);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.7);
  z-index: 500;
  pointer-events: none;
  min-width: 110px;
}
.mag-cvs {
  display: block;
  width: 90px; height: 90px;
  image-rendering: pixelated;
}
.mag-footer {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  background: #232323;
  border-top: 1px solid #383838;
}
.mag-swatch {
  width: 15px; height: 15px;
  border-radius: 3px; border: 1px solid #555;
  flex-shrink: 0;
}
.mag-footer code {
  color: var(--text1); font-size: 11px; letter-spacing: .3px; flex: 1;
  font-family: 'Courier New', monospace;
}
.mag-rgb { color: var(--text3); font-size: 10px; }

/* ── FILL BUTTONS 5-col ── */
.fill-btns-4 { grid-template-columns: repeat(4, 1fr) !important; }
.fill-btns-5 { grid-template-columns: repeat(5, 1fr) !important; }
.fbtn-ai { color: var(--accent) !important; }
.fbtn-ai.active { background: rgba(74,158,255,.2) !important; }

/* ── AI INPAINT SECTION ── */
.inpaint-key-row {
  display: flex; gap: 5px; margin-bottom: 8px;
}
.text-input-sm {
  flex: 1; background: var(--input); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text1);
  padding: 5px 8px; font-size: 11px; outline: none;
}
.text-input-sm:focus { border-color: var(--accent); }
.text-input-sm.invalid-key {
  border-color: #f87171;
  background: rgba(248,113,113,0.06);
}
.text-input-sm.invalid-key:focus { border-color: #f87171; box-shadow: 0 0 0 2px rgba(248,113,113,0.15); }
.btn-ai-run {
  width: 100%; background: linear-gradient(135deg, #6030c0, #4a9eff);
  border: none; border-radius: var(--r); color: #fff;
  padding: 9px 12px; cursor: pointer; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity .15s;
}
.btn-ai-run:hover { opacity: .88; }
.btn-ai-run:disabled { opacity: .45; cursor: not-allowed; }
.inpaint-status {
  margin-top: 8px; padding: 7px 10px; border-radius: var(--r);
  font-size: 11px; background: rgba(74,158,255,.1);
  border: 1px solid rgba(74,158,255,.2); color: var(--accent);
  line-height: 1.5;
}
.inpaint-status.error { background: rgba(232,68,68,.1); border-color: rgba(232,68,68,.2); color: #f88; }

/* ── MAGIC WAND SECTION ── */
.wand-wrap {
  background: rgba(74,158,255,.06);
  border: 1px solid rgba(74,158,255,.2);
  border-radius: var(--r);
  padding: 9px 10px;
  margin-bottom: 10px;
}
.wand-toggle {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: 12px; font-weight: 600;
  color: var(--text1);
}
.wand-toggle input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer;
}
#wandControls { margin-top: 10px; }

/* ── 도장/가이드/최근색상/이미지레이어 추가 스타일 ── */
.tool-hint-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:36px; height:36px; border:none; background:transparent;
  color:var(--text2); cursor:pointer; border-radius:6px; padding:2px;
  transition:background .12s, color .12s;
}
.tool-hint-btn:hover { background:var(--hover); color:var(--text1); }
.tool-hint-btn svg { flex-shrink:0; }

/* 최근 색상 스와치 */
.recent-swatches {
  display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;
}
.color-swatch {
  width:18px; height:18px; border-radius:3px; border:1px solid var(--border);
  cursor:pointer; transition:transform .1s;
}
.color-swatch:hover { transform:scale(1.2); border-color:var(--accent); }

/* 가이드라인 */
.guide-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 4px; border-radius:3px; cursor:pointer;
}
.guide-item:hover { background:var(--hover); }
.guide-del { background:none; border:none; color:var(--text3); cursor:pointer; font-size:13px; }
.guide-del:hover { color:var(--danger); }

/* 도장 커서 오버레이 */
#stampCursor {
  position:absolute; pointer-events:none; border-radius:50%;
  border:1.5px dashed rgba(255,255,255,0.85);
  display:none; transform:translate(-50%,-50%);
}

/* 이미지 레이어 — 선택 핸들 다른 색 */
.img-layer-handle { /* applied via canvas drawing */ }

/* 텍스트 감지 버튼 */
.sep-v { width:1px; height:14px; background:var(--border); margin:0 2px; }

/* ── 레이어 목록 ── */
.layer-list { display:flex; flex-direction:column; gap:2px; margin-top:4px; max-height:180px; overflow-y:auto; }
.layer-item {
  display:flex; align-items:center; gap:4px; padding:4px 6px;
  border-radius:4px; cursor:pointer; font-size:11px;
  border:1px solid transparent; transition:background .1s, border-color .1s;
}
.layer-item:hover { background:var(--hover); }
.layer-item.active { background:rgba(74,158,255,.12); border-color:var(--accent); }
.layer-item.hidden-layer { opacity:0.45; }
.layer-num  { min-width:16px; font-weight:700; color:var(--accent); font-size:10px; }
.layer-icon { font-size:12px; }
.layer-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text1); }
.layer-vis  { background:none; border:none; cursor:pointer; color:var(--text3); font-size:12px; padding:0 2px; }
.layer-vis:hover { color:var(--text1); }
.layer-del  { background:none; border:none; cursor:pointer; color:var(--text3); font-size:11px; padding:0 2px; }
.layer-del:hover { color:var(--danger); }
.no-layers  { font-size:11px; color:var(--text3); text-align:center; padding:8px 0; }

/* ═══════════════════════════════════════════ */
/* v1.3.0: 배치 처리 모달 */
/* ═══════════════════════════════════════════ */
.batch-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: batchFadeIn 0.2s ease;
}
@keyframes batchFadeIn { from { opacity: 0; } to { opacity: 1; } }
.batch-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.batch-dialog {
  position: relative;
  background: var(--bg2, #1c2128);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 90%; max-width: 580px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column;
}
.batch-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.batch-head h2 {
  margin: 0; font-size: 16px; color: var(--text1); font-weight: 700;
}
.batch-close {
  background: none; border: none; color: var(--text3);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  border-radius: 4px; transition: background 0.15s;
}
.batch-close:hover { background: var(--panel); color: var(--text1); }
.batch-setup, .batch-progress, .batch-done {
  padding: 20px;
}
.batch-section { margin-bottom: 20px; }
/* v1.7.10: 섹션 제목 흰색 (사용자 요청 6번) */
.batch-section-title {
  font-size: 11px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.batch-dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center; cursor: pointer;
  transition: all 0.15s;
  background: rgba(74, 158, 255, 0.02);
}
.batch-dropzone:hover { border-color: var(--accent, #4a9eff); background: rgba(74, 158, 255, 0.06); }
.batch-dropzone.dragging { border-color: var(--accent); background: rgba(74, 158, 255, 0.12); }
.batch-dz-icon { font-size: 28px; margin-bottom: 6px; }
.batch-dz-text { font-size: 13px; color: var(--text1); font-weight: 600; margin-bottom: 3px; }
.batch-dz-sub { font-size: 11px; color: var(--text3); }
.batch-file-list {
  margin-top: 8px; max-height: 240px; overflow-y: auto;
  font-size: 12px; padding: 8px;
  background: rgba(0,0,0,0.2); border-radius: 6px;
  border: 1px solid rgba(74,158,255,0.15);
}
.batch-file-list:empty::before {
  content: '📁 선택된 파일이 X — 위의 영역에 드래그하거나 클릭해서 추가하세요';
  display: block; color: var(--text3); padding: 16px 8px; text-align: center; font-size: 11.5px;
}
.batch-file-list-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; padding: 0 2px;
  font-size: 11px; color: var(--text2);
}
.batch-file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: var(--panel); border-radius: 4px; margin-bottom: 2px;
}
.batch-file-thumb {
  width: 56px; height: 42px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
}
.batch-file-item .name { color: var(--text2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-file-item .size { color: var(--text3); font-size: 10px; flex-shrink: 0; }
.batch-file-item .remove { background: none; border: none; color: var(--text3); cursor: pointer; padding: 0 4px; font-size: 14px; flex-shrink: 0; }
.batch-file-item .remove:hover { color: #f87171; }
.batch-options { display: flex; flex-direction: column; gap: 6px; }
.batch-opt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: background 0.15s;
}
.batch-opt:hover { background: var(--panel-hover, #22272e); }
.batch-opt-featured {
  background: linear-gradient(135deg, rgba(74,158,255,0.12), rgba(107,184,255,0.06)) !important;
  border-color: rgba(74,158,255,0.5) !important;
}
.batch-opt-featured:hover {
  background: linear-gradient(135deg, rgba(74,158,255,0.18), rgba(107,184,255,0.10)) !important;
}
.batch-opt-featured .batch-opt-name { color: #6bb8ff; }
.batch-opt input[type=checkbox] { margin-top: 2px; cursor: pointer; }
.batch-opt-body { flex: 1; }
.batch-opt-name { font-size: 13px; color: var(--text1); font-weight: 600; }
.batch-opt-desc { font-size: 11px; color: var(--text3); margin-top: 2px; line-height: 1.4; }
.batch-detail-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.batch-detail-row label {
  font-size: 12px; color: var(--text2); width: 90px; flex-shrink: 0;
}
.batch-detail-row select {
  flex: 1; background: var(--input, #0d1117);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text1); padding: 6px 8px; font-size: 12px;
}
.batch-actions {
  display: flex; gap: 8px; margin-top: 12px;
}
.batch-btn-primary {
  flex: 1; background: linear-gradient(135deg, #6030c0, #4a9eff);
  border: none; color: white; padding: 10px 16px;
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s;
}
.batch-btn-primary:hover { opacity: 0.9; }
.batch-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.batch-btn-secondary {
  flex: 1; background: var(--panel); border: 1px solid var(--border);
  color: var(--text2); padding: 10px 16px;
  border-radius: 8px; font-size: 13px; cursor: pointer;
}
.batch-btn-secondary:hover { background: var(--panel-hover); color: var(--text1); }
.batch-btn-danger {
  flex: 1; background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3); color: #f87171;
  padding: 10px 16px; border-radius: 8px; font-size: 13px; cursor: pointer;
}
.batch-btn-danger:hover { background: rgba(248, 113, 113, 0.2); }
.batch-prog-overall { margin-bottom: 16px; }
.batch-prog-label {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--text2); margin-bottom: 6px;
}
.batch-prog-bar {
  height: 8px; background: var(--panel); border-radius: 4px; overflow: hidden;
}
.batch-prog-fill {
  height: 100%; background: linear-gradient(90deg, #6030c0, #4a9eff);
  width: 0%; transition: width 0.3s;
}
.batch-prog-current {
  background: var(--panel); border-radius: 8px;
  padding: 12px; margin-bottom: 12px;
}
.batch-prog-current-name {
  font-size: 13px; color: var(--text1); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.batch-prog-current-step { font-size: 11px; color: var(--accent); margin-top: 3px; }
.batch-log {
  max-height: 180px; overflow-y: auto;
  background: var(--bg, #0d1117); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 11px; line-height: 1.6;
}
.batch-log-line { padding: 2px 0; }
.batch-log-line.ok { color: #4ade80; }
.batch-log-line.err { color: #f87171; }
.batch-log-line.info { color: var(--text3); }
.batch-done-icon {
  font-size: 48px; text-align: center; color: #4ade80;
  margin-bottom: 12px;
}
.batch-done-stat {
  text-align: center; font-size: 14px; color: var(--text1);
  margin-bottom: 16px;
}