#overlayLayer { position:absolute; top:0; left:0; pointer-events:none; }
#viewer .ov-item { position:absolute; box-sizing:border-box; cursor:move; pointer-events:auto; transform-origin:center center; }
#viewer .ov-item.ov-live { will-change:transform; z-index:5; }
#viewer .ov-item.selected { outline:calc(1px * var(--zoom-inv, 1)) solid var(--accent-color); outline-offset:calc(2px * var(--zoom-inv, 1)); }
#viewer .ov-text { box-sizing:border-box; white-space:pre-wrap; word-break:break-word; outline:none; line-height:1.25; padding:2px; min-width:20px; min-height:1em; }
#viewer .ov-text:hover { outline:1px dashed #94a3b8; }
#viewer .ov-image { width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; }
#viewer /* --zoom-inv 는 JS에서 (1/현재 뷰어 확대배율)로 계속 갱신된다.
           삭제버튼/리사이즈 핸들/회전손잡이에 곱해서, #viewer 캔버스를 확대해도
           화면상 크기가 항상 일정하게 유지되도록 한다(모서리 점이 커지는 문제 해결). */
        .ov-del { position:absolute; top:-13px; right:-13px; width:18px; height:18px; border-radius:50%; background:var(--danger-color); color:#fff; border:2px solid #fff; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto; box-shadow:0 1px 3px rgba(0,0,0,.3); transform:scale(var(--zoom-inv, 1)); transform-origin:center center; }
#viewer /* 8방향(모서리 4개 + 상하좌우 4개) 크기 조절 포인트: 평소엔 숨겨져 있다가 hover/선택 시 나타난다 */
        .ov-handle { position:absolute; width:9px; height:9px; margin:-4.5px; border-radius:50%; background:var(--accent-color); border:2px solid #fff; pointer-events:none; box-shadow:0 1px 3px rgba(0,0,0,.3); opacity:0; transition:opacity .12s; z-index:4; transform:scale(var(--zoom-inv, 1)); }
#viewer .ov-item:hover .ov-handle, #viewer .ov-item.selected .ov-handle { opacity:1; pointer-events:auto; }
#viewer .ov-handle.dir-nw { top:0; left:0; cursor:nwse-resize; }
#viewer .ov-handle.dir-n { top:0; left:50%; cursor:ns-resize; }
#viewer .ov-handle.dir-ne { top:0; left:100%; cursor:nesw-resize; }
#viewer .ov-handle.dir-e { top:50%; left:100%; cursor:ew-resize; }
#viewer .ov-handle.dir-se { top:100%; left:100%; cursor:nwse-resize; }
#viewer .ov-handle.dir-s { top:100%; left:50%; cursor:ns-resize; }
#viewer .ov-handle.dir-sw { top:100%; left:0; cursor:nesw-resize; }
#viewer .ov-handle.dir-w { top:50%; left:0; cursor:ew-resize; }
#viewer /* 회전 손잡이: 평소엔 숨겨져 있다가 항목에 마우스를 갖다대거나(hover) 선택하면 나타난다 */
        .ov-rotate-line { position:absolute; left:50%; top:-16px; width:1px; height:16px; background:var(--accent-color); transform:translateX(-50%) scale(var(--zoom-inv, 1)); transform-origin:bottom center; pointer-events:none; opacity:0; transition:opacity .12s; }
#viewer .ov-rotate { position:absolute; left:50%; top:-30px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:#fff; border:2px solid var(--accent-color); cursor:grab; pointer-events:none; box-shadow:0 1px 3px rgba(0,0,0,.3); opacity:0; transition:opacity .12s; transform:scale(var(--zoom-inv, 1)); transform-origin:center center; }
#viewer .ov-item:hover .ov-rotate, #viewer .ov-item:hover .ov-rotate-line, #viewer .ov-item.selected .ov-rotate, #viewer .ov-item.selected .ov-rotate-line { opacity:1; pointer-events:auto; }
#viewer .ov-rotate:active { cursor:grabbing; }
#viewer .float-toolbar { position:static; z-index:50; display:none; align-items:center; justify-content:center; gap:4px; background:#15151f; padding:7px 10px; border-radius:11px; box-shadow:0 14px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03) inset; border:1px solid #2a2a3a; flex-wrap:wrap; max-width:680px; margin:6px auto 0; }
#viewer .float-toolbar.show { display:flex; }
#viewer .ft-btn { min-width:27px; height:27px; padding:0 8px; border-radius:7px; border:1px solid #2e2e40; background:#20202e; color:#c7cad3; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.12s; }
#viewer .ft-btn:hover { background:#262638; border-color:#3d5af1; color:#8ea2ff; }
#viewer .ft-btn.active { background: linear-gradient(135deg,#3d5af1,#6d5bf0); color:#fff; border-color:#3d5af1; }
#viewer .ft-sep { width:1px; height:19px; background:#2c2c3d; margin:0 3px; }
#viewer .ft-size-input { width:40px; height:25px; border-radius:6px; border:1px solid #2e2e40; text-align:center; font-size:12px; font-weight:700; color:#e7e9f0; background:#1a1a26; }
#viewer .ft-size-input:focus { outline:none; border-color:#3d5af1; }
#viewer .ft-color { width:27px; height:27px; border-radius:50%; border:2px solid #33334a; padding:0; cursor:pointer; background:none; }
#viewer .ft-font-chip { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 10px; background:#20202e; }
#viewer .ft-font-chip::after { content:'▾'; margin-left:5px; font-size:9px; opacity:.7; }
#viewer .ft-label { font-size:9px; font-weight:800; color:#6b6b80; text-transform:uppercase; letter-spacing:.04em; margin:0 1px 0 5px; }
.font-popup { position:fixed; z-index:200; width:270px; max-height:400px; display:flex; flex-direction:column; background:#15151f; border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.45); border:1px solid #2a2a3a; }
.font-popup-search { margin:8px 8px 4px; padding:7px 10px; border:1px solid #2e2e40; background:#1a1a26; color:#e7e9f0; border-radius:7px; font-size:12px; outline:none; }
.font-popup-search::placeholder { color:#6b6b80; }
.font-popup-cats { display:flex; gap:4px; flex-wrap:wrap; padding:0 8px 6px; }
.font-popup-cat { padding:3px 9px; border-radius:10px; border:1px solid #2e2e40; background:#20202e; color:#a3a6b3; font-size:10px; cursor:pointer; white-space:nowrap; }
.font-popup-cat.active { background: linear-gradient(135deg,#3d5af1,#6d5bf0); border-color:#3d5af1; color:#fff; }
.font-popup-list { overflow-y:auto; padding:2px 6px 8px; flex:1; }
.font-popup-divider { padding:8px 9px 3px; font-size:10px; font-weight:800; color:#6b6b80; }
.font-popup-item { padding:7px 9px; border-radius:7px; cursor:pointer; color:#c7cad3; }
.font-popup-item:hover { background:#20202e; }
.font-popup-item.selected { background:#242c48; }
.font-popup-item.selected .fp-name { color:#8ea2ff; }
.fp-name { font-size:13px; color:#e7e9f0; font-weight:700; }
.fp-sub { font-size:10px; color:#75798a; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#viewer{--accent-color:#0E7C86;--accent:#0E7C86;--danger-color:#B8241F}
#overlayLayer{position:absolute;left:0;top:0;pointer-events:none;z-index:3}
#viewer .float-toolbar{position:sticky;bottom:68px;z-index:60;max-width:none;margin:8px auto 0;width:fit-content;max-width:100%}
.ovnote{font-size:11.5px;color:var(--soft);margin-top:8px;line-height:1.5}
.ovb{display:none;gap:4px;align-items:center}
.ovb button{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:12px;padding:3px 10px;border-radius:3px;cursor:pointer}
.ovb button:hover{border-color:var(--acc);color:var(--acc)}
body.is-cover .ovb{display:inline-flex}
body:not(.is-cover) #floatToolbar,body:not(.is-cover) #overlayLayer,body:not(.is-cover) #ovHint{display:none!important}
/* 표지 터잡기: 창 폭에 맞춰 넓게, 뷰어는 더 크게 */
body.is-cover header{padding-left:clamp(12px,1.8vw,32px);padding-right:clamp(12px,1.8vw,32px)}
body.is-cover .wrap{max-width:none;padding-left:clamp(12px,1.8vw,32px);padding-right:clamp(12px,1.8vw,32px)}
body.is-cover .wrap.has-menu{grid-template-columns:minmax(0,1fr) clamp(300px,22vw,380px)}
body.is-cover .vrw{grid-template-rows:20px clamp(520px,calc(100vh - 170px),1600px)}

/* ---- 툴바 2줄 + CMYK 팝업 + 센터 가이드 ---- */
#viewer .float-toolbar{flex-direction:column;align-items:center;gap:5px;padding:7px 12px}
#viewer .float-toolbar .ft-row{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
#viewer .ft-size-input{width:48px}
#viewer .ft-cmyk{gap:6px;padding:0 10px;font-size:11px;letter-spacing:.3px}
#viewer .ft-cmyk .ft-sw{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid #4b4b66;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
#cmykPop{position:fixed;z-index:210;width:272px;background:#15151f;border:1px solid #2a2a3a;border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.45);padding:12px 12px 10px;color:#c7cad3;font-family:'IBM Plex Sans KR',sans-serif}
#cmykPop .cp-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#cmykPop .cp-prev{width:44px;height:44px;border-radius:10px;border:2px solid #33334a;flex:none}
#cmykPop .cp-info{flex:1;min-width:0;font-size:11px;line-height:1.5;color:#9aa0b4}
#cmykPop .cp-info b{display:block;color:#e7e9f0;font-size:12.5px;letter-spacing:.2px}
#cmykPop .cp-eye{border:1px solid #2e2e40;background:#20202e;color:#c7cad3;border-radius:7px;height:27px;min-width:27px;cursor:pointer}
#cmykPop .cp-eye:hover{border-color:var(--accent);color:#7fd7d9}
#cmykPop .cp-row{display:grid;grid-template-columns:16px 1fr 52px;gap:8px;align-items:center;margin:7px 0}
#cmykPop .cp-row label{font-size:12px;font-weight:800;color:#e7e9f0;text-align:center}
#cmykPop input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:6px;outline:none;border:1px solid #2e2e40}
#cmykPop input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0E7C86;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4)}
#cmykPop input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #0E7C86;cursor:pointer}
#cmykPop input[type=number]{width:100%;height:25px;border-radius:6px;border:1px solid #2e2e40;background:#0f0f18;color:#e7e9f0;text-align:center;font:700 12px 'IBM Plex Sans KR',sans-serif;padding:0 2px}
#cmykPop input[type=number]:focus{outline:none;border-color:var(--accent)}
#cmykPop .cp-sw{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:9px;border-top:1px solid #2a2a3a}
#cmykPop .cp-sw button{width:24px;height:24px;border-radius:50%;border:2px solid #3a3a52;cursor:pointer;padding:0}
#cmykPop .cp-sw button:hover{border-color:#8ea2ff}
#cmykPop .cp-note{margin-top:8px;font-size:10px;color:#6b6b80;line-height:1.4}
#guideLayer{position:absolute;left:0;top:0;pointer-events:none;z-index:2}
#guideLayer svg{display:block;overflow:visible}
body:not(.is-cover) #guideLayer{display:none!important}
/* 내지 미리보기: 한 번에 펼침면 1개(2쪽)만 보이게 — 높이는 JS(fitIvHeight)가 맞춘다 */
.ivbody{grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto}
.ivbody.single{grid-template-columns:1fr 1fr}

/* ===== 책등 색(스포이드) · 영역 잘라내기 ===== */
.spine-color-row{margin-top:6px;padding:6px;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc}
.spine-color-row .scr-top{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.spine-color-row .scr-swatch{width:26px;height:26px;border:1px solid #94a3b8;border-radius:4px;background:#fff;flex:none}
.spine-color-row button,.spine-color-row .scr-pick{font:inherit;font-size:11px;font-weight:700;padding:4px 8px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;color:#334155;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.spine-color-row .scr-eye{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}
.spine-color-row .scr-pick input{width:22px;height:18px;padding:0;border:0;background:none;cursor:pointer}
.spine-color-row .scr-cmyk{display:flex;gap:4px;margin-top:5px}
.spine-color-row .scr-cmyk label{flex:1;font-size:10px;font-weight:700;color:#475569;display:flex;flex-direction:column;gap:1px;margin:0}
.spine-color-row .scr-cmyk input{width:100%;margin:0;padding:3px 4px;font-size:11px;box-sizing:border-box}
.spine-color-row .scr-hint{display:block;margin-top:4px;font-size:9px;color:#64748b;line-height:1.35}
body.pc-pick #vstage,body.pc-cut #vstage{cursor:crosshair!important}
#coverCutBar{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:3000;background:#1e293b;color:#fff;font-size:12px;padding:7px 12px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.35);display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:94vw}
#coverCutBar button{font:inherit;font-size:12px;font-weight:700;padding:4px 10px;border-radius:5px;border:1px solid #475569;background:#334155;color:#fff;cursor:pointer}
#coverCutBar button.pri{background:#0e7c86;border-color:#0e7c86}
#coverCutBar button:hover{filter:brightness(1.15)}
#coverCutBar label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
#coverCutBar input[type=number]{width:46px;padding:2px 4px;font-size:11px}
#coverCutRect{position:absolute;border:calc(1.5px * var(--zoom-inv, 1)) dashed #0e7c86;background:rgba(14,124,134,.16);pointer-events:none;z-index:30;display:none;box-sizing:border-box}

#coverCutRect .cc-h{position:absolute;display:none;width:calc(10px * var(--zoom-inv, 1));height:calc(10px * var(--zoom-inv, 1));margin:calc(-5px * var(--zoom-inv, 1));box-sizing:border-box;background:#fff;border:calc(1.5px * var(--zoom-inv, 1)) solid #0e7c86;border-radius:2px}
#coverCutRect.has-h .cc-h{display:block}
#coverCutRect .cc-h.nw{left:0;top:0}#coverCutRect .cc-h.n{left:50%;top:0}#coverCutRect .cc-h.ne{left:100%;top:0}#coverCutRect .cc-h.e{left:100%;top:50%}
#coverCutRect .cc-h.se{left:100%;top:100%}#coverCutRect .cc-h.s{left:50%;top:100%}#coverCutRect .cc-h.sw{left:0;top:100%}#coverCutRect .cc-h.w{left:0;top:50%}

/* ===== 다중 선택 · 그룹 · 회전 손잡이 위치(오른쪽 위) ===== */
/* 회전 손잡이: 선택 박스 오른쪽 위 모서리 바깥쪽 (가운데 위쪽 + 연결선은 쓰지 않음) */
#viewer .ov-rotate { left:auto; right:calc(-24px * var(--zoom-inv, 1)); top:calc(-24px * var(--zoom-inv, 1)); margin-left:0; }
#viewer .ov-rotate-line { display:none; }
/* 삭제(X)는 회전 손잡이와 겹치지 않게 왼쪽 위로 */
#viewer .ov-del { right:auto; left:-13px; }
#viewer .ov-item.multi-sel { outline:calc(1px * var(--zoom-inv, 1)) solid var(--accent-color); outline-offset:calc(2px * var(--zoom-inv, 1)); }
#viewer .ov-item.multi-sel .ov-handle, #viewer .ov-item.multi-sel .ov-rotate, #viewer .ov-item.multi-sel .ov-rotate-line { display:none; }
#viewer .ov-item.in-group:not(.selected):not(.multi-sel):hover { outline:calc(1px * var(--zoom-inv, 1)) dashed #94a3b8; outline-offset:calc(2px * var(--zoom-inv, 1)); }
#msBox { position:absolute; box-sizing:border-box; border:calc(1px * var(--zoom-inv, 1)) dashed var(--accent-color); pointer-events:none; z-index:6; }
#msBox .ov-rotate { opacity:1; pointer-events:auto; }
#viewer #msBar { position:sticky; bottom:68px; z-index:60; margin:8px auto 0; }   /* 서체 툴바(#floatToolbar)와 똑같이 화면 아래에 붙어 따라다님 — 확대·스크롤해도 항상 보임 */
#viewer #msBar.show { display:flex; }
#msBar { display:none; z-index:50; align-items:center; justify-content:center; gap:4px; background:#15151f; padding:7px 10px; border-radius:11px; box-shadow:0 14px 34px rgba(0,0,0,.4); border:1px solid #2a2a3a; flex-wrap:wrap; max-width:680px; margin:6px auto; }
#msBar .ms-cnt { color:#c7cad3; font-size:12px; font-weight:700; padding:0 6px; }
#msBar .ft-btn:disabled { opacity:.35; cursor:default; }


/* ===== 변형 상자(그룹·다중 선택) · 회전 아이콘 · 우클릭 메뉴 · 가이드 ===== */
#msBox { position:absolute; box-sizing:border-box; border:calc(1px * var(--zoom-inv, 1)) solid var(--accent-color); pointer-events:none; z-index:6; transform-origin:center center; }
#msBox .ms-h { position:absolute; width:10px; height:10px; margin:-5px; border-radius:2px; background:#fff; border:1.5px solid var(--accent-color); box-shadow:0 1px 3px rgba(0,0,0,.3); pointer-events:auto; z-index:7; transform:scale(var(--zoom-inv, 1)); }
#msBox .ms-h.dir-nw { top:0; left:0 } #msBox .ms-h.dir-n { top:0; left:50% } #msBox .ms-h.dir-ne { top:0; left:100% }
#msBox .ms-h.dir-e { top:50%; left:100% } #msBox .ms-h.dir-se { top:100%; left:100% } #msBox .ms-h.dir-s { top:100%; left:50% }
#msBox .ms-h.dir-sw { top:100%; left:0 } #msBox .ms-h.dir-w { top:50%; left:0 }
/* 회전 손잡이: 흰 점 대신 회전 화살표(↻) 아이콘 — 항목/상자가 기울어도 아이콘은 똑바로 */
#viewer .ov-rotate, #viewer #msBox .ms-rot {
  position:absolute; width:22px; height:22px; box-sizing:border-box; border-radius:50%; margin:0;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.7-6'/><path d='M20 3.5V9h-5.5'/></svg>") center/14px 14px no-repeat;
  border:1.5px solid var(--accent-color); box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:grab;
  transform:scale(var(--zoom-inv, 1)) rotate(calc(-1 * var(--r, 0deg))); transform-origin:center center;
}
#viewer .ov-rotate:hover, #viewer #msBox .ms-rot:hover { background-color:#e6f6f7; }
#viewer #msBox .ms-rot { right:calc(-26px * var(--zoom-inv, 1)); top:calc(-26px * var(--zoom-inv, 1)); left:auto; pointer-events:auto; opacity:1; z-index:7; }
#viewer .ov-rotate { right:calc(-26px * var(--zoom-inv, 1)); top:calc(-26px * var(--zoom-inv, 1)); }
#msChip { position:absolute; z-index:8; transform:scale(var(--zoom-inv, 1)); transform-origin:0 0; white-space:nowrap; pointer-events:auto; cursor:pointer;
  background:#15151f; color:#fff; border:1px solid #2a2a3a; border-radius:7px; font:700 11px/1 'IBM Plex Sans KR',sans-serif; padding:6px 10px; box-shadow:0 4px 12px rgba(0,0,0,.35); }
#msChip:hover { background:#0e7c86; border-color:#0e7c86; }
.ov-guide { position:absolute; background:#e11d8f; pointer-events:none; z-index:9; display:none; }
.ov-guide.v { top:0; width:1px; } .ov-guide.h { left:0; height:1px; }
#ovCtx { position:fixed; z-index:4000; min-width:210px; background:#15151f; border:1px solid #2a2a3a; border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.45); padding:5px; font:600 12px 'IBM Plex Sans KR',sans-serif; color:#c7cad3; }
#ovCtx button { display:flex; justify-content:space-between; gap:22px; width:100%; background:none; border:0; color:inherit; font:inherit; padding:7px 10px; border-radius:6px; cursor:pointer; text-align:left; }
#ovCtx button:hover:not(:disabled) { background:#262638; color:#8ea2ff; }
#ovCtx button:disabled { opacity:.35; cursor:default; }
#ovCtx kbd { font:inherit; color:#6b6b80; }
#ovCtx hr { border:0; border-top:1px solid #2c2c3d; margin:4px 2px; }
#msBar { flex-direction:column; gap:5px; max-width:none; width:fit-content; }
#msBar .ft-row { display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; }
#msBar .ms-sel { height:27px; border-radius:7px; border:1px solid #2e2e40; background:#20202e; color:#c7cad3; font:700 12px 'IBM Plex Sans KR',sans-serif; padding:0 6px; }
#msBar .ms-hint { color:#6b6b80; font-size:11px; font-weight:600; padding:0 4px; }