#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:2px solid var(--accent-color); outline-offset:2px; }
#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}