:root{
  --bg:#f0f4f8;--card:#fff;--border:#dde3ed;
  --blue:#2563eb;--blue2:#1d4ed8;--green:#16a34a;
  --red:#dc2626;--text:#1e293b;--muted:#64748b;
  --sidebar:280px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,'Noto Sans KR',sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column}

/* ── 상단 헤더 */
header{background:var(--blue);color:#fff;padding:10px 20px;display:flex;align-items:center;gap:16px;flex-shrink:0}
header h1{font-size:1rem;font-weight:700;flex:1}
.hbtn{padding:6px 14px;border-radius:6px;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:.8rem;cursor:pointer;font-weight:600;transition:.15s}
.hbtn:hover{background:rgba(255,255,255,.15)}
.hbtn.primary{background:#fff;color:var(--blue);border-color:#fff}
.hbtn:disabled{opacity:.4;cursor:not-allowed}

/* ── 레이아웃 */
.workspace{display:flex;flex:1;overflow:hidden}

/* ── 왼쪽 사이드바: 슬라이드 썸네일 */
.sidebar{width:var(--sidebar);background:var(--card);border-right:1px solid var(--border);overflow-y:auto;padding:10px;flex-shrink:0}
.sidebar h2{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;padding:0 4px}
.thumb{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;margin-bottom:6px;transition:.15s}
.thumb:hover{border-color:var(--blue)}
.thumb.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.thumb img{width:100%;display:block}
.thumb .pg-num{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.6);color:#fff;font-size:.65rem;font-weight:600;padding:1px 6px;border-radius:3px}
.thumb .wm-badge{position:absolute;top:4px;right:4px;background:var(--green);color:#fff;font-size:.6rem;padding:1px 5px;border-radius:3px;display:none}
.thumb.wm-done .wm-badge{display:block}

/* ── 캔버스 영역 */
.canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.canvas-toolbar{background:var(--card);border-bottom:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
.tool-btn{padding:5px 12px;border-radius:5px;border:1px solid var(--border);background:#fff;font-size:.78rem;cursor:pointer;font-weight:500;transition:.15s;display:flex;align-items:center;gap:5px}
.tool-btn:hover{background:var(--bg);border-color:var(--blue)}
.tool-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.tool-btn:disabled,.action-btn:disabled,.canvas-toolbar select:disabled{opacity:.4;cursor:not-allowed}
.tool-btn:disabled:hover{background:#fff;border-color:var(--border)}
/* ── 처리 전 안내 (2026-10-21) */
.process-gate{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#fffbeb;border-bottom:1px solid #fde68a;color:#92400e;font-size:.85rem;line-height:1.5}
.process-gate > div{flex:1}
.process-gate-sub{display:block;font-size:.75rem;opacity:.85}
.process-gate-btn{padding:8px 16px;border-radius:6px;border:none;background:var(--blue);color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center}
#btn-wm-remove.attention{background:var(--blue);color:#fff;border-color:var(--blue)}
/* ── 순서 안내 (2026-10-21) — 업로드 직후 ① 워터마크 영역 지정 → ② 워터마크 제거 실행 */
[data-step]{position:relative}
[data-step]::before{content:attr(data-step);display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:6px;
  border-radius:50%;background:#ff1744;color:#fff;font-weight:800;font-size:.78rem;line-height:1;flex-shrink:0;
  box-shadow:0 0 4px #ff1744,0 0 10px #ff5252,0 0 16px rgba(255,23,68,.6);vertical-align:middle}
[data-step].step-done::before{background:#16a34a;box-shadow:0 0 4px #16a34a,0 0 10px rgba(22,163,74,.6)}
.step-on{outline:2px solid #ff1744 !important;outline-offset:2px;animation:neon-pulse 1.1s ease-in-out infinite;z-index:21}
@keyframes neon-pulse{0%,100%{box-shadow:0 0 6px 2px rgba(255,23,68,.85),0 0 18px 6px rgba(255,82,82,.55)}
  50%{box-shadow:0 0 2px 1px rgba(255,23,68,.5),0 0 8px 2px rgba(255,82,82,.25)}}
.step-on.tool-btn::after{content:'👆';position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:1.5rem;
  pointer-events:none;animation:finger-bob .9s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,23,68,.9));z-index:22}
@keyframes finger-bob{0%,100%{margin-top:2px}50%{margin-top:10px}}
.step-chip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#ff1744;color:#fff;
  font-size:.72rem;font-weight:800;box-shadow:0 0 4px #ff1744,0 0 8px rgba(255,82,82,.7);vertical-align:middle}
.process-gate-btn.step-on{animation:neon-pulse 1.1s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.step-on,.step-on.tool-btn::after,.process-gate-btn{animation:none}}
.tool-sep{width:1px;height:24px;background:var(--border);margin:0 2px}
.canvas-scroll{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:20px;background:#94a3b8}
#canvas-container{position:relative;box-shadow:0 8px 32px rgba(0,0,0,.3)}
#main-canvas{display:block}

/* ── 오른쪽 패널: 속성 */
.props-panel{width:260px;background:var(--card);border-left:1px solid var(--border);overflow-y:auto;padding:12px;flex-shrink:0}
.props-panel h2{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
/* ── 광고 패널 (우측) */
.ad-panel{width:170px;background:var(--card);border-left:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:10px 8px;gap:12px;overflow-y:auto}
.ad-slot{background:#f0f4ff;border:2px dashed #93c5fd;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#93c5fd;font-size:.62rem;text-align:center;position:relative;overflow:hidden;box-sizing:border-box}
.ad-slot .ad-label{font-size:.55rem;position:absolute;top:4px;left:6px;opacity:.6;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#60a5fa}
.ad-slot .ad-ico{font-size:1.4rem;opacity:.4}
.ad-slot .ad-size{opacity:.5;line-height:1.5;font-size:.65rem}
/* 우측 광고 슬롯 — IAB Wide Skyscraper */
.ad-slot.s160x600{width:154px;min-width:154px;height:600px;min-height:600px}
.ad-slot.s160x300{width:154px;min-width:154px;height:300px;min-height:300px}
/* 수평 배너 공통 */
.ad-banner-top{background:#f8faff;border-bottom:2px dashed #bfdbfe;display:flex;align-items:center;justify-content:center;padding:6px 0;flex-shrink:0;min-height:102px}
.ad-banner-bottom{background:#f8faff;border-top:2px dashed #bfdbfe;display:flex;align-items:center;justify-content:center;padding:6px 0;flex-shrink:0;min-height:102px}
.ad-slot.s728x90{width:728px;min-width:200px;max-width:100%;height:90px;min-height:90px}
.ad-slot.s468x60{width:468px;max-width:100%;height:60px;min-height:60px}
.prop-group{margin-bottom:16px}
.prop-group label{display:block;font-size:.75rem;font-weight:600;color:var(--muted);margin-bottom:4px}
.prop-group input,.prop-group textarea,.prop-group select{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:5px;font-size:.8rem;outline:none;transition:.15s}
.prop-group input:focus,.prop-group textarea:focus{border-color:var(--blue)}
.prop-group textarea{min-height:80px;resize:vertical;font-family:inherit;line-height:1.5}
.coord-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.badge-group{display:flex;gap:4px;flex-wrap:wrap}
.badge{display:inline-flex;padding:3px 8px;border-radius:4px;font-size:.7rem;font-weight:600}
.badge-blue{background:#dbeafe;color:#1e40af}
.badge-green{background:#dcfce7;color:#166534}
.badge-yellow{background:#fef9c3;color:#854d0e}
.badge-red{background:#fee2e2;color:#991b1b}
.action-btn{width:100%;padding:7px;border-radius:5px;border:1px solid var(--border);background:#fff;font-size:.78rem;cursor:pointer;font-weight:600;margin-bottom:5px;transition:.15s}
.action-btn:hover{background:var(--bg)}
.action-btn.danger{border-color:var(--red);color:var(--red)}
.action-btn.danger:hover{background:#fee2e2}

/* ── 하단 상태바 */
.statusbar{background:var(--text);color:#94a3b8;font-size:.72rem;padding:4px 16px;display:flex;gap:16px;flex-shrink:0}
.statusbar span{display:flex;align-items:center;gap:4px}

/* ── 설정 모달 */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:flex;align-items:center;justify-content:center}
.modal{background:#fff;border-radius:12px;padding:24px;width:480px;max-width:90vw;max-height:85vh;overflow-y:auto}
.modal h2{font-size:1.1rem;font-weight:700;margin-bottom:16px}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.btn-cancel{padding:8px 16px;border-radius:6px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:.85rem}
.btn-ok{padding:8px 16px;border-radius:6px;border:none;background:var(--blue);color:#fff;cursor:pointer;font-size:.85rem;font-weight:600}
.form-row{margin-bottom:12px}
.form-row label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:5px}
.form-row input,.form-row select{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:.85rem;outline:none}
.form-row input:focus{border-color:var(--blue)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hidden{display:none!important}
.progress{height:5px;background:var(--border);border-radius:3px;margin-top:10px;overflow:hidden}
.progress-bar{height:100%;background:var(--blue);border-radius:3px;width:0;transition:width .4s}
.notice{background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;padding:10px 12px;font-size:.78rem;color:#1e40af;margin-bottom:12px;line-height:1.5}
.notice.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
/* ── 워터마크 드래그 영역 */
#wm-drag-overlay{position:absolute;border:2.5px dashed #ef4444;background:rgba(239,68,68,.18);pointer-events:none;display:none;z-index:10;border-radius:3px}
#wm-drag-hint{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(239,68,68,.92);color:#fff;font-size:.75rem;font-weight:700;padding:5px 14px;border-radius:20px;pointer-events:none;display:none;z-index:11;white-space:nowrap}
#ocr-drag-overlay{position:absolute;border:2.5px dashed #16a34a;background:rgba(22,163,74,.12);pointer-events:none;display:none;z-index:10;border-radius:3px}
#ocr-drag-hint{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(22,163,74,.95);color:#fff;font-size:.75rem;font-weight:700;padding:5px 14px;border-radius:20px;pointer-events:none;display:none;z-index:11;white-space:nowrap}
#ocr-loading-badge{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(37,99,235,.95);color:#fff;font-size:.75rem;font-weight:700;padding:5px 14px;border-radius:20px;pointer-events:none;display:none;z-index:12;white-space:nowrap}
#eraser-drag-overlay{position:absolute;border:2.5px dashed #ef4444;background:rgba(239,68,68,.15);pointer-events:none;display:none;z-index:10;border-radius:3px}
#eraser-drag-hint{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(220,38,38,.95);color:#fff;font-size:.75rem;font-weight:700;padding:5px 14px;border-radius:20px;pointer-events:none;display:none;z-index:11;white-space:nowrap}
#eraser-loading-badge{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:rgba(220,38,38,.95);color:#fff;font-size:.75rem;font-weight:700;padding:5px 14px;border-radius:20px;pointer-events:none;display:none;z-index:13;white-space:nowrap}
#canvas-container{position:relative}
#tool-wm-drag.active{background:#ef4444 !important;color:#fff !important;border-color:#ef4444 !important}

/* ── 반응형 (3단계 · 2026-10-13). 휴대전화(터치 전용)는 /m 으로 보내고, 여기는 태블릿·좁은 창만 돌본다 */
@media (max-width:1280px){ .ad-panel{display:none} }
@media (max-width:1000px){
  :root{--sidebar:200px}
  .props-panel{width:220px}
  .ad-banner-top,.ad-banner-bottom{display:none}
  header{padding:8px 12px;gap:8px;flex-wrap:wrap}
}