:root{--bg:#F6F4EE;--panel:#fff;--ink:#181F26;--soft:#5B6570;--line:#C9C2AF;--acc:#0E7C86;--accs:#DCEEEE;--amber:#C77D12;--dark:#14181f;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101419;--panel:#1a2029;--ink:#eceae2;--soft:#9aa3b2;--line:#3a4350;--accs:#12383c;--dark:#0a0d11}}
:root[data-theme="dark"]{--bg:#101419;--panel:#1a2029;--ink:#eceae2;--soft:#9aa3b2;--line:#3a4350;--accs:#12383c;--dark:#0a0d11}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans KR',-apple-system,sans-serif;font-size:12.5px}
header{background:var(--dark);color:#f4f1e8;display:flex;align-items:center;gap:10px;padding:9px 14px;font-weight:700}
header i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(14,124,134,.3)}
header span{margin-left:auto;font-weight:400;font-size:12px;color:#9aa3b2}
.wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:12px;max-width:1500px;margin:auto}
.wrap.has-menu{grid-template-columns:minmax(0,1fr) 300px}
.wrap{min-width:760px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:11px}
#drop{border:2px dashed var(--line);text-align:center;padding:16px;cursor:pointer;transition:.15s}
#drop.over,#drop:hover{border-color:var(--acc);background:var(--accs)}
#drop b{font-size:13.5px;display:block;margin-bottom:4px}#drop small{color:var(--soft)}
#drop.compact{padding:10px;font-size:13px}#drop.compact small{display:none}#drop.compact b{font-size:13px;display:inline;margin:0}
#info{display:none;flex-wrap:wrap;gap:8px 22px;align-items:baseline}
#info .n{font-weight:700;font-size:13px;margin-right:6px;word-break:break-all}
#info dl{margin:0;display:flex;gap:6px;align-items:baseline}#info dt{color:var(--soft);font-size:12px}#info dd{margin:0;font-weight:500}
.warn{color:var(--amber)}
.strip-h{display:flex;justify-content:space-between;font-size:12px;color:var(--soft);margin:2px 0 6px}
.strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;min-height:50px}
.th{flex:0 0 auto;text-align:center;font-size:10px;color:var(--soft)}
.th canvas{display:block;height:92px;width:auto;background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.th.ph{width:66px;height:92px;background:var(--accs);border:1px solid var(--line)}
.skip{flex:0 0 auto;align-self:center;padding:0 12px;color:var(--soft);font-size:12px;writing-mode:horizontal-tb}
#choose{display:none;scroll-margin-top:12px}
#choose h2{margin:0 0 4px;font-size:16px}#choose p{margin:0 0 14px;color:var(--soft)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:560px){.modes{grid-template-columns:1fr}}
.mode{text-align:left;border:2px solid var(--line);background:var(--panel);color:var(--ink);padding:11px 13px;border-radius:3px;cursor:pointer;font:inherit}
.mode b{display:block;font-size:13.5px;margin-bottom:4px}.mode span{color:var(--soft);font-size:11.5px;line-height:1.5}
.mode:hover{border-color:var(--acc)}.mode.on{border-color:var(--acc);background:var(--accs)}
.mode:focus-visible,.tab:focus-visible,.go:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
aside{display:none;position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow:auto}
.has-menu aside{display:block}
aside h3{margin:0 0 10px;font-size:12.5px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.tab{border:1px solid var(--line);background:transparent;color:var(--soft);padding:6px 10px;font:inherit;font-size:12.5px;border-radius:3px;cursor:pointer}
.tab.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.row label{font-size:13px}
select,input[type=number]{font:inherit;font-size:13px;padding:5px 7px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:3px;max-width:150px}
input[type=number]{width:80px}
.go{width:100%;margin-top:14px;background:var(--acc);color:#fff;border:0;padding:12px;font:inherit;font-weight:700;border-radius:3px;cursor:pointer}
.note{font-size:11.5px;color:var(--soft);margin-top:8px;line-height:1.5}

.ana-h{font-size:13px;font-weight:700;color:var(--soft);margin:0 0 10px}
.mets{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px}
.met{border:1px solid var(--line);background:var(--bg);padding:7px 10px;border-radius:3px}
.met small{display:block;color:var(--soft);font-size:11px;margin-bottom:4px}.met b{font-size:15px;font-weight:700}
.ok{color:#2C7A4B}.bad{color:#B8241F}.amb{color:var(--amber)}.blu{color:#2563eb}.gry{color:var(--soft)}
.sec{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.badge{font-size:12px;font-weight:700;padding:2px 10px;border:1px solid currentColor;border-radius:3px}
.fl{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lnk{background:none;border:0;color:var(--acc);font:inherit;font-size:12.5px;cursor:pointer;padding:6px 0;text-decoration:underline}
.flist{display:none;margin:6px 0 0;padding:8px 12px;background:var(--bg);border:1px solid var(--line);font-size:12.5px;line-height:1.7}
.lists{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}@media(max-width:620px){.lists{grid-template-columns:1fr}}
.lst{border:1px solid var(--line);padding:12px;border-radius:3px;min-width:0}
.lst h4{margin:0 0 8px;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.rng{font-weight:700;font-size:15px;word-break:break-all}.full{font-size:12px;color:var(--soft);word-break:break-all;margin-top:6px;line-height:1.6}
.cp{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:12px;padding:3px 9px;border-radius:3px;cursor:pointer}
.mode2{display:flex;gap:14px;align-items:center;font-size:13px;margin:8px 0}.mode2 label{cursor:pointer}
#cropApp,#coverApp{
    --paper: #F6F4EE;
    --paper-line: #E4E0D4;
    --ink: #181F26;
    --ink-soft: #5B6570;
    --panel: #FFFFFF;
    --accent: #0E7C86;
    --accent-soft: #DCEEEE;
    --amber: #C77D12;
    --amber-soft: #F6E9D3;
    --danger: #B8241F;
    --danger-soft: #F7DEDC;
    --ok: #2C7A4B;
    --line: #C9C2AF;
    --radius: 3px;
    --side-panel-w: 250px;
    --topbar-h: 46px;
}
#coverApp{ height: 100%; overflow: hidden; }
#cropApp *{ box-sizing: border-box; }
#cropApp{
    margin: 0;
    font-family: 'IBM Plex Sans KR', -apple-system, sans-serif;
    background: var(--paper);
    color: var(--ink);
    height: 100%;
    overflow: hidden;
}
#cropApp .mono{ font-family: 'IBM Plex Sans KR', sans-serif; }
#cropApp .crop-layout{ display: flex; width: 100%; padding: 15px; gap: 15px; box-sizing: border-box; height: 100%; }
#cropApp .crop-sidebar{ width: 320px; background: var(--panel); padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 18px; overflow-y: auto; flex-shrink: 0; }
#cropApp .crop-main{ flex: 1; background: var(--panel); padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; min-width: 0; gap: 10px; }
#cropApp .crop-layout h2{
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
    margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
#cropApp .sidebar-title{ display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
#cropApp .sidebar-title h2{ font-size: 15px; text-transform: none; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
#cropApp 
.crop-thumbpanel{
    width: 150px; min-width: 100px; max-width: 640px; flex-shrink: 0;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    display: flex; flex-direction: column; position: relative; overflow: visible;
}
#cropApp .thumbpanel-header{ display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px; flex-shrink: 0; }
#cropApp .thumbpanel-header h2{ font-size: 12px; text-transform: none; letter-spacing: -0.01em; color: var(--ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
#cropApp .crop-thumbpanel .crop-dropzone{ margin: 0 12px 10px; padding: 10px 6px; font-size: 12px; flex-shrink: 0; }
#cropApp .thumbpanel-empty{ display: none; margin: 8px 16px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
#cropApp .crop-thumbpanel.is-empty .thumbpanel-empty{ display: block; }
#cropApp .thumbpanel-resize-handle{
    position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; background: transparent;
}
#cropApp .thumbpanel-resize-handle::after{ content: ""; position: absolute; top: 0; right: 3px; width: 3px; height: 100%; background: transparent; transition: background 0.15s; }
#cropApp .thumbpanel-resize-handle:hover::after, body.resizing-thumbpanel .thumbpanel-resize-handle::after{ background: var(--accent); }
#cropApp 
.global-drop-overlay{
    position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
    background: rgba(14,124,134,0.12); pointer-events: none;
}
#cropApp .global-drop-overlay.active{ display: flex; }
#cropApp .global-drop-inner{
    background: #fff; border: 3px dashed var(--accent); border-radius: 8px; padding: 34px 50px;
    font-size: 16px; font-weight: 700; color: var(--accent); text-align: center; line-height: 1.6;
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
}
#cropApp .crop-layout .control-group{ display: flex; flex-direction: column; gap: 8px; }
#cropApp .crop-layout .control-group label{ font-size: 12px; font-weight: 600; color: var(--ink-soft); }
#cropApp .crop-layout .input-row{ display: flex; gap: 8px; align-items: center; }
#cropApp .crop-layout .input-row span{ color: var(--ink-soft); font-weight: 600; }
#cropApp .crop-layout .swap-btn{
    width: 30px; height: 30px; flex-shrink: 0; padding: 0; border: 1.5px solid var(--ink);
    background: #fff; color: var(--ink); border-radius: var(--radius); font-size: 15px;
    line-height: 1; cursor: pointer; transition: 0.15s;
}
#cropApp .crop-layout .swap-btn:hover{ background: var(--ink); color: #fff; }
#cropApp .crop-layout .swap-btn:active{ transform: rotate(180deg); }
#cropApp .crop-layout input[type="number"], #cropApp .crop-layout input[type="text"], #cropApp .crop-layout select{
    width: 100%; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: var(--radius);
    font-family: 'IBM Plex Sans KR', sans-serif; font-size: 13.5px; outline: none; box-sizing: border-box; background: #fff; color: var(--ink);
}
#cropApp .crop-layout select{ cursor: pointer; }
#cropApp .crop-layout input[type="number"]:focus, #cropApp .crop-layout input[type="text"]:focus, #cropApp .crop-layout select:focus{ border-color: var(--accent); }
#cropApp .crop-dropzone{
    border: 2px dashed #B9B2A0; background: #FBFAF6; padding: 22px 16px; text-align: center;
    border-radius: var(--radius); cursor: pointer; transition: all 0.15s; margin-bottom: 2px; color: var(--ink-soft); font-size: 13px;
}
#cropApp .crop-dropzone:hover, #cropApp .crop-dropzone.dragover{ border-color: var(--accent); background: var(--accent-soft); }
#cropApp .crop-layout button{
    color: #fff; border: none; padding: 12px; border-radius: var(--radius); font-size: 13.5px; font-weight: 700;
    letter-spacing: .02em; cursor: pointer; transition: 0.15s; width: 100%;
}
#cropApp .crop-layout button:disabled{ background: #B9B2A0 !important; cursor: not-allowed; }
#cropApp 
.download-box{
    margin-top: auto; border: 1.5px solid var(--ink); border-radius: var(--radius);
    padding: 9px; background: #FBFAF6; display: flex; flex-direction: column; gap: 0;
}
#cropApp #crop-downloadAllBtn{
    background: var(--ink); position: relative; overflow: hidden; isolation: isolate;
}
#cropApp #crop-downloadAllBtn:hover:not(:disabled){ background: #000; }
#cropApp #crop-downloadAllBtn .dl-btn-fill{
    position: absolute; inset: 0; z-index: 0; width: 0%;
    background: var(--accent); transition: width 0.15s ease-out;
}
#cropApp #crop-downloadAllBtn .dl-btn-label{ position: relative; z-index: 1; }
#cropApp #crop-progressLabel{
    font-size: 11px; color: var(--ink-soft); text-align: center; margin-top: 0; height: 0; opacity: 0;
    font-family: 'IBM Plex Sans KR', sans-serif; overflow: hidden; transition: 0.15s;
}
#cropApp .download-box.generating #crop-progressLabel{ height: 15px; opacity: 1; margin-top: 6px; }
#cropApp 
.presets{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#cropApp .crop-layout .preset-btn{
    width: 100%; border: 1.5px solid var(--ink); background: #fff; color: var(--ink);
    font-family: 'IBM Plex Sans KR', sans-serif; font-size: 11.5px; font-weight: 700;
    padding: 7px 4px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cropApp .crop-layout .preset-btn.active{ background: var(--ink); color: #fff; }
#cropApp 
.fit-options{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
#cropApp .fit-card{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 8px 4px 7px; cursor: pointer; transition: 0.15s; background: #fff; }
#cropApp .fit-card:hover{ border-color: var(--accent); }
#cropApp .fit-card.active{ border-color: var(--accent); background: var(--accent-soft); }
#cropApp .fit-card input{ display: none; }
#cropApp .fit-card .fit-icon{ flex-shrink: 0; width: 28px; height: 28px; }
#cropApp .fit-card .t{ font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.25; }
#cropApp .manual-toolbar{ display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 7px 9px; margin-top: 2px; }
#cropApp .manual-toolbar .manual-hint{ font-size: 11.5px; color: var(--ink-soft); font-weight: 600; flex: 1 1 100%; min-width: 120px; }
#cropApp .manual-toolbar .zoom-label{ font-family: 'IBM Plex Sans KR', sans-serif; font-size: 12px; font-weight: 700; color: var(--accent); min-width: 40px; text-align: right; }
#cropApp .zoom-input-wrap{ display: inline-flex; align-items: center; gap: 2px; font-family: 'IBM Plex Sans KR', sans-serif; font-size: 12px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
#cropApp .zoom-input{
    width: 46px; font-family: 'IBM Plex Sans KR', sans-serif; font-size: 12px; font-weight: 700; color: var(--accent);
    border: 1.5px solid var(--accent); border-radius: 4px; padding: 3px 2px; text-align: right; background: #fff;
}
#cropApp .zoom-input::-webkit-outer-spin-button, #cropApp .zoom-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
#cropApp .zoom-input{ -moz-appearance: textfield; }
#cropApp .manual-toolbar #manualResetBtn{ width: auto; padding: 5px 8px; font-size: 11px; flex-shrink: 0; }
#cropApp .manual-zoom-row{ display: flex; align-items: center; gap: 8px; flex: 1 1 100%; }
#cropApp .manual-zoom-row input[type="range"]{
    flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 3px;
    background: linear-gradient(var(--accent), var(--accent)) 0 / var(--fill, 50%) 100% no-repeat, #fff;
    border: 1px solid var(--accent); cursor: pointer; outline: none;
}
#cropApp .manual-zoom-row input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
    background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); cursor: pointer; margin-top: -0.5px;
}
#cropApp .manual-zoom-row input[type="range"]::-moz-range-thumb{
    width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--accent); cursor: pointer;
}
#cropApp .manual-zoom-row input[type="range"]::-moz-range-track{ height: 4px; background: transparent; }
#cropApp 
.switch{ position: relative; display: inline-block; width: 34px; height: 19px; flex-shrink: 0; cursor: pointer; }
#cropApp .switch input{ opacity: 0; width: 0; height: 0; }
#cropApp .switch .switch-slider{ position: absolute; inset: 0; background: #D8D2C2; border-radius: 999px; transition: 0.15s; }
#cropApp .switch .switch-slider::before{ content: ""; position: absolute; width: 13px; height: 13px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.15s; }
#cropApp .switch input:checked + .switch-slider{ background: var(--accent); }
#cropApp .switch input:checked + .switch-slider::before{ transform: translateX(15px); }
#cropApp .control-group-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#cropApp .crop-layout input[type="number"]:disabled, #cropApp .crop-layout .mini-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
#cropApp 
.page-nav{ display: flex; gap: 6px; margin-bottom: 2px; }
#cropApp .crop-layout .page-nav-btn{
    flex: 1; width: auto; background: #fff; color: var(--ink-soft); border: 1.5px solid var(--line);
    border-radius: var(--radius); padding: 8px 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.15s;
}
#cropApp .crop-layout .page-nav-btn.active{ background: var(--ink); border-color: var(--ink); color: #fff; }
#cropApp .crop-layout .page-nav-btn:hover:not(.active){ border-color: var(--accent); color: var(--accent); }
#cropApp .page-panel{ display: none; }
#cropApp #page-work.page-panel.active{ display: flex; flex-direction: column; flex: 1; min-height: 0; }
#cropApp #page-info.page-panel.active{ display: block; overflow-y: auto; flex: 1; min-height: 0; }
#cropApp 
.info-page h3{ font-size: 14px; margin: 22px 0 8px; color: var(--ink); }
#cropApp .info-page h3:first-child{ margin-top: 0; }
#cropApp .info-page p, #cropApp .info-page li{ font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
#cropApp .info-page ul{ margin: 4px 0; padding-left: 20px; }
#cropApp .info-page .note-box{ background: var(--amber-soft); border: 1px solid var(--amber); color: #7A4E0B; padding: 10px 12px; border-radius: var(--radius); font-size: 12.5px; margin-top: 8px; }
#cropApp 
.mini-btn-row{ display: flex; gap: 6px; }
#cropApp .crop-layout .mini-btn{
    flex: 1; width: auto; font-family: 'IBM Plex Sans KR', sans-serif; background: #fff; color: var(--ink); border: 1.5px solid var(--ink);
    border-radius: var(--radius); padding: 6px 4px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
#cropApp .crop-layout .mini-btn.active{ background: var(--ink); border-color: var(--ink); color: #fff; }
#cropApp .control-group .hint{ font-weight: 400; color: var(--ink-soft); font-size: 11px; }
#cropApp .page-range-info{ font-family: 'IBM Plex Sans KR', sans-serif; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
#cropApp .page-range-info.warn{ color: var(--danger); font-weight: 700; }
#cropApp .autodetect-report{ font-size: 11px; color: var(--ink-soft); background: var(--surface-2, #F3F1EA); border-radius: var(--radius); padding: 8px 10px; line-height: 1.6; }
#cropApp .autodetect-report .adr-line{ display: flex; justify-content: space-between; gap: 8px; }
#cropApp .autodetect-report .adr-tag{ font-weight: 700; }
#cropApp .autodetect-report .adr-tag.meta{ color: #0E7C86; }
#cropApp .autodetect-report .adr-tag.visual{ color: #C77D12; }
#cropApp .autodetect-report .adr-tag.none{ color: var(--ink-soft); }
#cropApp 
.viewer-section{ padding-top: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
#cropApp 
.viewer-thumbstrip{
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px;
    align-content: start; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; padding: 2px 12px 16px;
}
#cropApp .viewer-thumb-wrap{ width: 100%; display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
#cropApp .viewer-thumb{ position: relative; width: 100%; aspect-ratio: 1 / 1; height: auto; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); display: flex; align-items: center; justify-content: center; transition: border-color 0.15s; }
#cropApp .viewer-thumb-wrap:hover .viewer-thumb{ border-color: var(--accent); }
#cropApp .viewer-thumb-wrap.active .viewer-thumb{ border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
#cropApp .viewer-thumb canvas{ max-width: 100%; max-height: 100%; display: block; }
#cropApp .viewer-thumb .rotation-badge{ position: absolute; top: 4px; right: 4px; background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber); font-size: 10px; padding: 1px 5px; border-radius: var(--radius); font-weight: 700; line-height: 1.5; }
#cropApp .viewer-thumb-name{ font-size: 11px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
#cropApp .viewer-thumb-wrap.active .viewer-thumb-name{ color: var(--accent); }
#cropApp .viewer-info{ display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 10px; padding: 9px 12px; background: #FBFAF6; border: 1px solid var(--line); border-radius: var(--radius); flex-shrink: 0; }
#cropApp .viewer-info .viewer-info-name{ font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
#cropApp .viewer-info .viewer-info-meta{ font-family: 'IBM Plex Sans KR', sans-serif; font-size: 11.5px; color: var(--ink-soft); font-weight: 500; }
#cropApp .viewer-info .viewer-info-meta.ok{ color: var(--ok); font-weight: 700; }
#cropApp .viewer-info .viewer-info-meta.warn{ color: var(--danger); font-weight: 700; }
#cropApp .viewer-info .rotation-badge{ background: var(--amber-soft); color: var(--amber); border: 1px solid var(--amber); font-size: 10.5px; padding: 2px 7px; border-radius: var(--radius); font-weight: 700; }
#cropApp .viewer-toolbar{ display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; flex-shrink: 0; }
#cropApp .crop-main .viewer-toolbar button{ width: auto; padding: 7px 14px; font-size: 12px; background: var(--ink); }
#cropApp .crop-main .viewer-toolbar button:hover{ background: #000; }
#cropApp .viewer-toolbar .zoom-label{ font-family: 'IBM Plex Sans KR', sans-serif; font-size: 12px; font-weight: 700; min-width: 46px; text-align: center; color: var(--ink); }
#cropApp .viewer-toolbar .viewer-note{ font-size: 11.5px; color: var(--amber); font-weight: 600; }
#cropApp .viewer-rulers-wrap{
    flex: 1; min-height: 260px; display: grid;
    grid-template-columns: 17px 1fr; grid-template-rows: 17px 1fr;
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff;
}
#cropApp .ruler-corner{ grid-column: 1; grid-row: 1; background: #EFEBDF; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#cropApp .ruler-top{ grid-column: 2; grid-row: 1; position: relative; overflow: hidden; background: #EFEBDF; border-bottom: 1px solid var(--line); }
#cropApp .ruler-left{ grid-column: 1; grid-row: 2; position: relative; overflow: hidden; background: #EFEBDF; border-right: 1px solid var(--line); }
#cropApp .ruler-top canvas, #cropApp .ruler-left canvas{ position: absolute; top: 0; left: 0; display: block; }
#cropApp .viewer-stage{ grid-column: 2; grid-row: 2; position: relative; min-height: 0; overflow: hidden; background: #EDEAE0; cursor: grab; touch-action: none; }
#cropApp .viewer-stage.dragging{ cursor: grabbing; }
#cropApp .viewer-stage.manual-mode{ cursor: move; }
#cropApp .viewer-stage.manual-mode.dragging{ cursor: grabbing; }
#cropApp .viewer-stage.space-pan{ cursor: grab; }
#cropApp .viewer-stage.space-pan.dragging{ cursor: grabbing; }
#cropApp .viewer-stage-content{ position: absolute; top: 0; left: 0; transform-origin: 0 0; }
#cropApp 
.viewer-scrollbar{ position: absolute; z-index: 5; background: rgba(0,0,0,0.04); display: none; }
#cropApp .viewer-scrollbar.active{ display: block; }
#cropApp .viewer-scrollbar-h{ left: 0; right: 11px; bottom: 0; height: 11px; }
#cropApp .viewer-scrollbar-v{ top: 0; bottom: 11px; right: 0; width: 11px; }
#cropApp .viewer-scrollbar-thumb{ position: absolute; background: var(--ink-soft); opacity: .5; border-radius: 6px; cursor: pointer; transition: opacity .12s; }
#cropApp .viewer-scrollbar-thumb:hover, #cropApp .viewer-scrollbar-thumb.dragging{ opacity: .85; }
#cropApp .viewer-scrollbar-h .viewer-scrollbar-thumb{ top: 1px; bottom: 1px; }
#cropApp .viewer-scrollbar-v .viewer-scrollbar-thumb{ left: 1px; right: 1px; }
#cropApp .viewer-stage-content canvas{ display: block; position: relative; z-index: 1; image-rendering: pixelated; }
#cropApp 
.viewer-bleed-guide{
    position: absolute; box-sizing: border-box; pointer-events: none; z-index: 2;
    border: 2px dashed rgba(199,125,18,0.9);
}
#cropApp .bleed-label{
    position: absolute; z-index: 4; top: 0; left: 0; transform: translate(2px, 2px);
    background: #C77D12; color: #fff; font-family: 'IBM Plex Sans KR', sans-serif;
    font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
    white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#cropApp .viewer-trim-guide{ position: absolute; border: 3px solid #FF2A1F; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #FF2A1F, 0 0 12px 1px rgba(255,42,31,0.65); box-sizing: border-box; pointer-events: none; z-index: 3; }
#cropApp .trim-handle{
    position: absolute; width: 15px; height: 15px; margin: -8px;
    background: #fff; border: 2.5px solid #FF2A1F; border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    pointer-events: none; display: none; z-index: 5; touch-action: none;
}
#cropApp .viewer-trim-guide.manual-mode .trim-handle{ display: block; pointer-events: auto; }
#cropApp .trim-handle-tl{ top: 0; left: 0; cursor: nwse-resize; }
#cropApp .trim-handle-tr{ top: 0; left: 100%; cursor: nesw-resize; }
#cropApp .trim-handle-bl{ top: 100%; left: 0; cursor: nesw-resize; }
#cropApp .trim-handle-br{ top: 100%; left: 100%; cursor: nwse-resize; }
#cropApp 
.trim-handle-edge{ background: #FFF4E8; }
#cropApp .trim-handle-t{ top: 0; left: 50%; cursor: ns-resize; }
#cropApp .trim-handle-b{ top: 100%; left: 50%; cursor: ns-resize; }
#cropApp .trim-handle-l{ top: 50%; left: 0; cursor: ew-resize; }
#cropApp .trim-handle-r{ top: 50%; left: 100%; cursor: ew-resize; }
#cropApp .viewer-empty{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 13px; text-align: center; padding: 20px; margin: 0; }
@font-face{font-family:'GmarketSans';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');font-weight:300;font-display:swap;}
@font-face{font-family:'GmarketSans';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');font-weight:500;font-display:swap;}
@font-face{font-family:'GmarketSans';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');font-weight:700;font-display:swap;}
#coverApp{
            --primary-color: #0f172a;
            --bg-color: #f8fafc;
            --panel-bg: #ffffff;
            --border-color: #cbd5e1;
            --accent-color: #2563eb;
            --success-color: #059669;
            --danger-color: #dc2626;
        }
#coverApp{ margin: 0; font-family: 'Pretendard', system-ui, sans-serif; display: flex; flex-direction: column; height: 100%; background-color: var(--bg-color); color: #334155; overflow: hidden; }
#coverApp .top-bar{ display: flex; justify-content: space-between; align-items: center; padding: 5px 14px; margin: 0 8px; margin-right: calc(8px + var(--side-panel-w)); background: var(--panel-bg); border-bottom: 1px solid var(--border-color); flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
#coverApp .logo-title{ font-size: 13px; margin: 0; font-weight: 800; color: var(--primary-color); }
#coverApp .preset-ui{ display: flex; align-items: center; gap: 6px; font-size: 11px; }
#coverApp .preset-ui select, #coverApp .preset-ui input{ padding: 3px 7px; border: 1px solid #cbd5e1; border-radius: 5px; font-size:11px; }
#coverApp .main-container{ display: flex; flex: 1; overflow: hidden; }
#coverApp .preview-panel{ flex: 1; display: flex; flex-direction: column; padding: 8px; overflow-y: hidden; overflow-x: hidden; scroll-behavior: smooth; }
#coverApp .cover-view-snap{ display: flex; flex-direction: column; min-height: 100%; flex-shrink: 0; scroll-snap-align: start; scroll-snap-stop: normal; }
#coverApp .cover-info-bottom{ display: none !important; }
#coverApp .cover-info-bottom #pdfInfoBox,
#coverApp .cover-info-bottom #innerFileStatus{ white-space: nowrap; overflow-x: auto; }
#coverApp .control-panel{ width: 300px; background: var(--panel-bg); border-left: 1px solid var(--border-color); padding: 10px; overflow-y: auto; flex-shrink: 0; box-shadow: -2px 0 10px rgba(0,0,0,0.02); }
#coverApp .dropzone{ border: 2px dashed var(--accent-color); background: #eff6ff; padding: 8px; margin-bottom: 8px; text-align: center; border-radius: 7px; cursor: pointer; font-size: 12px; color: var(--accent-color); font-weight: 800; }
#coverApp .dropzone.dragover{ background: #dbeafe; transform: scale(1.01); }
#coverApp .control-group{ margin-bottom: 8px; padding: 8px; border: 1px solid var(--border-color); border-radius: 7px; background: #f8fafc; }
#coverApp .control-group h3{ margin: 0 0 6px 0; font-size: 11px; color: var(--primary-color); border-bottom: 1px solid #e2e8f0; padding-bottom: 3px; }
#coverApp label{ display: block; font-size: 10px; font-weight: 600; color: #475569; margin-bottom: 2px; }
#coverApp .control-panel select, #coverApp .control-panel input[type="number"], #coverApp .control-panel input[type="text"]{ width: 100%; padding: 4px; margin-bottom: 4px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 11px; box-sizing: border-box; }
#coverApp .row-inputs{ display: flex; gap: 5px; }
#coverApp .row-inputs > div{ flex: 1; }
#coverApp .slot-grid-container{ display: flex; align-items: stretch; gap: 5px; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid #e2e8f0; overflow-x: auto; }
#coverApp .slot-box{ flex: 1; min-width: 60px; border: 1px dashed var(--border-color); background: white; padding: 4px; border-radius: 6px; text-align: center; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; justify-content: center; }
#coverApp .slot-box:hover{ border-color: var(--accent-color); background: #f0fdf4; }
#coverApp .slot-box.active{ border: 2px solid var(--accent-color) !important; background: #eff6ff !important; box-shadow: 0 0 5px rgba(37,99,235,0.3); }
#coverApp .slot-box label{ cursor: pointer; margin-bottom: 1px; }
#coverApp .slot-status{ font-size: 9px; font-weight: bold; color: #64748b; margin-top: 2px; word-break: keep-all; pointer-events: none; }
#coverApp .spine-src-btn{ padding: 6px 4px; border: 1px solid #cbd5e1; border-radius: 5px; background: #fff; color: #475569; font-size: 11px; font-weight: 700; cursor: pointer; transition: 0.15s; }
#coverApp .spine-src-btn:hover{ border-color: var(--accent-color); color: var(--accent-color); }
#coverApp .spine-src-btn.active{ border: 2px solid var(--accent-color); background: #eff6ff; color: var(--accent-color); box-shadow: 0 0 4px rgba(37,99,235,0.25); }
#coverApp .info-box{ background: #ecfdf5; border: 1px solid #10b981; color: #047857; padding: 6px; border-radius: 6px; text-align: center; font-weight: bold; font-size: 11px; margin-top: 4px; }
#coverApp .btn-export{ width: 100%; background-color: var(--success-color); color: white; border: none; cursor: pointer; font-weight: bold; height: 34px; font-size: 12px; border-radius: 6px; margin-top: 6px; box-shadow: 0 4px 6px rgba(5, 150, 105, 0.1); }
#coverApp .btn-export:disabled{ background-color: #94a3b8; cursor: not-allowed; box-shadow: none; }
#coverApp .preview-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; background: white; padding: 4px 10px; border-radius: 7px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
#coverApp .preview-header button{ background-color: #e2e8f0; color: #334155; border: none; padding: 4px 9px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 10px; }
#coverApp .canvas-container{ flex: 1 1 auto; min-height: 56vh; background: #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); position: relative; cursor: grab; touch-action: none; }
#coverApp .inner-preview-section{ display: none; flex-direction: column; gap: 6px; flex-shrink: 0; margin-top: 8px; background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 7px; padding: 8px; height: calc(100% - 8px); scroll-snap-align: start; scroll-snap-stop: normal; scroll-margin-top: 8px; overflow: hidden; }
#coverApp .inner-preview-header{ flex-shrink: 0; }
#coverApp .inner-preview-jump-row{ display: none; justify-content: flex-end; margin-top: 4px; }
#coverApp.has-inner-preview .inner-preview-jump-row{ display: flex; }
#coverApp .inner-preview-jump-btn{ background: var(--accent-color); color: #fff; border: none; padding: 5px 12px; border-radius: 5px; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(37,99,235,.3); }
#coverApp .inner-preview-jump-btn:hover{ filter: brightness(1.08); }
#coverApp .inner-preview-back-btn{ background: #e2e8f0; color: #334155; border: none; padding: 4px 10px; border-radius: 4px; font-weight: 700; cursor: pointer; font-size: 10.5px; }
#coverApp .inner-preview-back-btn:hover{ background: #cbd5e1; }
#coverApp .inner-preview-header{ display: flex; justify-content: space-between; align-items: baseline; flex-shrink: 0; }
#coverApp .inner-preview-header h2{ margin: 0; font-size: 13px; color: var(--primary-color); }
#coverApp .inner-preview-count{ font-size: 10.5px; font-weight: 500; color: #64748b; margin-left: 4px; }
#coverApp .inner-view-toggle{ display: flex; gap: 4px; }
#coverApp .iv-btn{ background: #e2e8f0; color: #334155; border: none; padding: 4px 10px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 10.5px; }
#coverApp .iv-btn.active{ background: var(--accent-color); color: #fff; }
#coverApp .inner-preview-scroll{ flex: 1; min-height: 0; overflow-y: auto; overflow-x: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 10px 4px; background: #e2e8f0; border-radius: 6px; overscroll-behavior: contain; }
#coverApp .inner-preview-page-single canvas, #coverApp .inner-preview-spread-slot canvas{ display: block; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); width: 100%; max-width: 100%; height: auto; }
#coverApp .inner-preview-spread{ display: flex; gap: 2px; align-items: flex-start; width: 100%; max-width: 900px; }
#coverApp .inner-preview-spread-slot{ display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
#coverApp .inner-preview-page-single{ display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 640px; }
#coverApp .ip-page-label{ font-size: 10px; font-weight: 700; color: #64748b; }
#coverApp .inner-preview-loading, #coverApp .inner-preview-error{ font-size: 12px; color: #64748b; padding: 20px; }
#coverApp .canvas-container.dragging{ cursor: grabbing; }
#coverApp .canvas-container.space-pan{ cursor: grab; }
#coverApp .canvas-container.space-pan.dragging{ cursor: grabbing; }
#coverApp .viewer-stage-content{ position: absolute; top: 0; left: 0; transform-origin: 0 0; }
#coverApp .paper{ background: white; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid #cbd5e1; position: relative; display: flex; justify-content: center; align-items: center; }
#coverApp .page-manager{ background: white; border-radius: 8px; padding: 6px 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); margin-bottom: 5px; display: flex; flex-direction: column; }
#coverApp .thumbnail-strip{ display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px 0; }
#coverApp .thumb-wrapper{ position: relative; width: 52px; height: 68px; background: #fff; border: 1px solid #cbd5e1; flex-shrink: 0; border-radius: 4px; cursor: grab; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: 0.2s; }
#coverApp .thumb-wrapper:active{ cursor: grabbing; }
#coverApp .thumb-wrapper.selected{ border: 2px solid var(--accent-color); box-shadow: 0 0 5px rgba(37,99,235,0.3); }
#coverApp .thumb-wrapper.drag-over{ border-left: 4px solid var(--success-color); transform: scale(1.05); }
#coverApp .thumb-num{ position: absolute; bottom: -14px; font-size: 9px; font-weight: bold; color: #475569; }
#coverApp 
        .viewer-toolbar{ display:flex; align-items:center; gap:3px; margin-left:8px; padding-left:8px; border-left:1px solid #e2e8f0; }
#coverApp .viewer-toolbar button{ background-color:#e2e8f0; color:#334155; border:none; padding:4px 8px; border-radius:4px; font-weight:bold; cursor:pointer; font-size:10px; }
#coverApp .viewer-toolbar .zoom-label{ font-size:10px; font-weight:800; color:#475569; min-width:38px; text-align:center; }
#coverApp 
        .global-drop-overlay{ position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(37,99,235,0.12); pointer-events: none; }
#coverApp .global-drop-overlay.active{ display: flex; }
#coverApp .global-drop-inner{ background: #fff; border: 3px dashed var(--accent-color); border-radius: 8px; padding: 34px 50px; font-size: 13px; font-weight: 800; color: var(--accent-color); text-align: center; line-height: 1.6; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
#coverApp 
        .canvas-toolbar{ display:flex; align-items:center; gap:6px; margin-bottom:5px; }
#coverApp .canvas-toolbar .ct-btn{ display:flex; align-items:center; gap:4px; padding:5px 10px; border-radius:6px; border:1px solid #cbd5e1; background:#fff; color:#334155; font-size:11px; font-weight:700; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:.15s; }
#coverApp .canvas-toolbar .ct-btn:hover{ border-color: var(--accent-color); color: var(--accent-color); background:#eff6ff; }
#coverApp .canvas-toolbar .ct-btn .ic{ font-size:13px; }
#coverApp .canvas-toolbar .ct-hint{ font-size:10px; color:#94a3b8; margin-left:4px; }
#coverApp .paper{ overflow: visible; }
#coverApp #overlayLayer{ position:absolute; top:0; left:0; pointer-events:none; }
#coverApp .ov-item{ position:absolute; box-sizing:border-box; cursor:move; pointer-events:auto; transform-origin:center center; }
#coverApp .ov-item.ov-live{ will-change:transform; z-index:5; }
#coverApp .ov-item.selected{ outline:2px solid var(--accent-color); outline-offset:2px; }
#coverApp .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; }
#coverApp .ov-text:hover{ outline:1px dashed #94a3b8; }
#coverApp .ov-image{ width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; }
#coverApp 
        .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; }
#coverApp 
        .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)); }
#coverApp .ov-item:hover .ov-handle, #coverApp .ov-item.selected .ov-handle{ opacity:1; pointer-events:auto; }
#coverApp .ov-handle.dir-nw{ top:0; left:0; cursor:nwse-resize; }
#coverApp .ov-handle.dir-n{ top:0; left:50%; cursor:ns-resize; }
#coverApp .ov-handle.dir-ne{ top:0; left:100%; cursor:nesw-resize; }
#coverApp .ov-handle.dir-e{ top:50%; left:100%; cursor:ew-resize; }
#coverApp .ov-handle.dir-se{ top:100%; left:100%; cursor:nwse-resize; }
#coverApp .ov-handle.dir-s{ top:100%; left:50%; cursor:ns-resize; }
#coverApp .ov-handle.dir-sw{ top:100%; left:0; cursor:nesw-resize; }
#coverApp .ov-handle.dir-w{ top:50%; left:0; cursor:ew-resize; }
#coverApp 
        .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; }
#coverApp .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; }
#coverApp .ov-item:hover .ov-rotate, #coverApp .ov-item:hover .ov-rotate-line, #coverApp .ov-item.selected .ov-rotate, #coverApp .ov-item.selected .ov-rotate-line{ opacity:1; pointer-events:auto; }
#coverApp .ov-rotate:active{ cursor:grabbing; }
#coverApp .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; }
#coverApp .float-toolbar.show{ display:flex; }
#coverApp .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; }
#coverApp .ft-btn:hover{ background:#262638; border-color:#3d5af1; color:#8ea2ff; }
#coverApp .ft-btn.active{ background: linear-gradient(135deg,#3d5af1,#6d5bf0); color:#fff; border-color:#3d5af1; }
#coverApp .ft-sep{ width:1px; height:19px; background:#2c2c3d; margin:0 3px; }
#coverApp .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; }
#coverApp .ft-size-input:focus{ outline:none; border-color:#3d5af1; }
#coverApp .ft-color{ width:27px; height:27px; border-radius:50%; border:2px solid #33334a; padding:0; cursor:pointer; background:none; }
#coverApp .ft-font-chip{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 10px; background:#20202e; }
#coverApp .ft-font-chip::after{ content:'▾'; margin-left:5px; font-size:9px; opacity:.7; }
#coverApp .ft-label{ font-size:9px; font-weight:800; color:#6b6b80; text-transform:uppercase; letter-spacing:.04em; margin:0 1px 0 5px; }
#coverApp 
        .pi-guide-line{ position:absolute; top:0; bottom:0; width:0; cursor:ew-resize; z-index:10; }
#coverApp .pi-guide-line:hover{ filter: brightness(1.3); }
#coverApp .pi-guide-label{ position:absolute; top:-2px; left:4px; color:#fff; font-size:10px; font-weight:800; padding:2px 5px; border-radius:4px; white-space:nowrap; pointer-events:none; }
#coverApp{
    --primary-color: var(--ink);
    --bg-color: var(--paper);
    --panel-bg: var(--panel);
    --border-color: var(--line);
    --accent-color: var(--accent);
    --success-color: var(--ok);
    --danger-color: var(--danger);
}
#coverApp,
#coverApp .ft-label{ font-family: 'IBM Plex Sans KR', -apple-system, sans-serif !important; }
#coverApp{ color: var(--ink) !important; }
#coverApp label,
#coverApp .thumb-num, #coverApp .zoom-label, #coverApp .canvas-toolbar .ct-hint,
#coverApp .slot-status, #coverApp .spine-src-btn{ color: var(--ink-soft) !important; }
#coverApp .preset-ui select, #coverApp .preset-ui input,
#coverApp .control-panel select, #coverApp .control-panel input[type="number"], #coverApp .control-panel input[type="text"],
#coverApp .spine-src-btn, #coverApp .paper, #coverApp .thumb-wrapper{ border-color: var(--line) !important; }
#coverApp .control-group{ background: var(--paper) !important; border-color: var(--line) !important; }
#coverApp .control-group h3{ border-bottom-color: var(--line) !important; }
#coverApp .dropzone{ background: var(--accent-soft) !important; }
#coverApp .dropzone.dragover,
#coverApp .slot-box.active,
#coverApp .spine-src-btn.active,
#coverApp .canvas-toolbar .ct-btn:hover{ background: var(--accent-soft) !important; }
#coverApp .slot-box:hover{ background: var(--accent-soft) !important; }
#coverApp .info-box{ background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--ok) !important; }
#coverApp .preview-header, #coverApp .preview-header button,
#coverApp .canvas-container, #coverApp .viewer-toolbar button,
#coverApp .canvas-toolbar .ct-btn, #coverApp .inner-preview-section,
#coverApp .inner-preview-scroll, #coverApp .iv-btn{ background: var(--panel) !important; color: var(--ink) !important; border-color: var(--line) !important; }
#coverApp .canvas-container, #coverApp .inner-preview-scroll{ background: #EDEAE0 !important; }
#coverApp .iv-btn.active{ background: var(--accent) !important; color: #fff !important; }
#coverApp .viewer-toolbar{ border-left-color: var(--line) !important; }
#coverApp .global-drop-inner{ border-color: var(--accent) !important; color: var(--accent) !important; }
#coverApp .dropzone, #coverApp .control-group, #coverApp .slot-box, #coverApp .btn-export,
#coverApp .preview-header, #coverApp .canvas-container, #coverApp .page-manager,
#coverApp .thumb-wrapper, #coverApp .spine-src-btn, #coverApp .preview-header button,
#coverApp .viewer-toolbar button, #coverApp .canvas-toolbar .ct-btn, #coverApp .global-drop-inner,
#coverApp .inner-preview-section, #coverApp .inner-preview-scroll, #coverApp .iv-btn,
#coverApp .control-panel select, #coverApp .control-panel input[type="number"], #coverApp .control-panel input[type="text"]{
    border-radius: var(--radius) !important;
}
#coverApp .ft-btn.active{ background: linear-gradient(135deg, var(--accent), #12A2A8) !important; border-color: var(--accent) !important; }
#coverApp .ft-btn:hover{ border-color: var(--accent) !important; color: #7fd7d9 !important; }
#coverApp .ft-size-input:focus{ border-color: var(--accent) !important; }
#cropApp .crop-layout .crop-sidebar,
#coverApp .control-panel{
    position: fixed; top: var(--topbar-h); right: 0; bottom: 0;
    width: var(--side-panel-w) !important; height: auto !important;
    z-index: 40; box-sizing: border-box;
}
#cropApp .crop-layout .crop-sidebar{
    border-radius: 0 !important; border: none !important; border-left: 1px solid var(--line) !important;
    box-shadow: -4px 0 14px rgba(0,0,0,.05);
}
#cropApp .crop-layout{ padding-right: calc(15px + var(--side-panel-w)); }
#coverApp .preview-panel{ margin-right: var(--side-panel-w); }
#cropApp .crop-layout .crop-sidebar{ padding: 12px 14px !important; gap: 9px !important; }
#cropApp .crop-layout .crop-sidebar .control-group{ gap: 5px !important; }
#cropApp .crop-layout .crop-sidebar .control-group label,
#cropApp .crop-layout .crop-sidebar .control-group-head label{ font-size: 11px !important; }
#cropApp .crop-layout .crop-sidebar .hint{ font-size: 9.5px !important; }
#cropApp .crop-layout .crop-sidebar input[type="number"],
#cropApp .crop-layout .crop-sidebar input[type="text"]{ padding: 5px 7px !important; font-size: 11.5px !important; height: auto !important; }
#cropApp .crop-layout .crop-sidebar .fit-options{ gap: 5px !important; }
#cropApp .crop-layout .crop-sidebar .fit-card{ padding: 5px 3px 4px !important; gap: 3px !important; }
#cropApp .crop-layout .crop-sidebar .fit-card .fit-icon{ width: 20px !important; height: 20px !important; }
#cropApp .crop-layout .crop-sidebar .fit-card .t{ font-size: 9.5px !important; }
#cropApp .crop-layout .crop-sidebar .presets{ gap: 4px !important; }
#cropApp .crop-layout .crop-sidebar .preset-btn{ padding: 4px 2px !important; font-size: 10px !important; }
#cropApp .crop-layout .crop-sidebar .mini-btn-row{ gap: 4px !important; }
#cropApp .crop-layout .crop-sidebar .mini-btn{ padding: 4px 6px !important; font-size: 10.5px !important; }
#cropApp .crop-layout .crop-sidebar .manual-toolbar{ padding: 5px 7px !important; gap: 4px 6px !important; }
#cropApp .crop-layout .crop-sidebar .download-box,
#cropApp .crop-layout .crop-sidebar .handoff-box{ padding: 9px !important; }
#cropApp .crop-layout .crop-sidebar #crop-downloadAllBtn{ height: 32px !important; font-size: 11.5px !important; }
#cropApp .crop-layout .crop-sidebar .handoff-hint{ font-size: 10px !important; }
#coverApp .viewer-rulers-wrap{
    flex: 1; min-height: 0; display: grid;
    grid-template-columns: 17px 1fr; grid-template-rows: 17px 1fr;
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff;
}
#coverApp .ruler-corner{ grid-column: 1; grid-row: 1; background: #EFEBDF; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#coverApp .ruler-top{ grid-column: 2; grid-row: 1; position: relative; overflow: hidden; background: #EFEBDF; border-bottom: 1px solid var(--line); }
#coverApp .ruler-left{ grid-column: 1; grid-row: 2; position: relative; overflow: hidden; background: #EFEBDF; border-right: 1px solid var(--line); }
#coverApp .ruler-top canvas, #coverApp .ruler-left canvas{ position: absolute; top: 0; left: 0; display: block; }
#coverApp .viewer-rulers-wrap .canvas-container{
    grid-column: 2; grid-row: 2; flex: none; min-height: 0;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
}
#coverApp .top-bar{ padding: 3px 10px; }
#coverApp .logo-title{ font-size: 11px; }
#coverApp .preset-ui{ font-size: 10px; gap: 4px; }
#coverApp .preset-ui select, #coverApp .preset-ui input{ padding: 2px 5px; font-size: 10px; }
#coverApp .preset-ui input#newPresetName{ width: 74px; }
#coverApp .preview-panel{ padding: 6px; }
#coverApp .preview-header{ padding: 3px 8px; margin-bottom: 4px; }
#coverApp .preview-header h2{ font-size: 12px; }
#coverApp .preview-header button{ padding: 3px 7px; font-size: 9px; }
#coverApp .viewer-toolbar{ gap: 4px; }
#coverApp .canvas-toolbar{ margin-bottom: 4px; gap: 4px; }
#coverApp .canvas-toolbar .ct-btn{ padding: 3px 7px; font-size: 10px; gap: 3px; }
#coverApp .canvas-toolbar .ct-hint{ font-size: 9px; }
#coverApp .control-panel{ width: var(--side-panel-w); padding: 8px; }
#coverApp .control-group{ margin-bottom: 6px; padding: 6px 7px; }
#coverApp .control-group h3{
    font-size: 12px; padding-bottom: 3px; margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: .08em; color: var(--accent) !important; font-weight: 700;
}
#coverApp label{ font-size: 11px; margin-bottom: 1px; }
#coverApp .control-panel select, #coverApp .control-panel input[type="number"], #coverApp .control-panel input[type="text"]{ padding: 5px 7px; font-size: 11.5px; margin-bottom: 3px; }
#coverApp .row-inputs{ gap: 4px; }
#coverApp .btn-export{ height: 28px; font-size: 11px; margin-top: 5px; }
#coverApp .info-box{ padding: 5px; font-size: 10px; }
#coverApp .slot-grid-container{ gap: 4px; margin-bottom: 4px; padding-bottom: 4px; }
#coverApp .slot-box{ padding: 3px 2px; }
#coverApp .slot-box label{ font-size: 9px; }
#coverApp .slot-status{ font-size: 8px; margin-top: 1px; }
#coverApp .thumbnail-strip{ gap: 6px; padding: 3px 0 6px 0; }
#coverApp .top-btn{ padding: 3px 7px !important; font-size: 9px !important; }
#coverApp .control-panel .control-group > h3{
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none;
}
#coverApp .control-panel .control-group > h3::after{
    content: "▾"; font-size: 9px; color: #94a3b8; margin-left: 6px; transition: transform 0.15s; flex-shrink: 0;
}
#coverApp .control-panel .control-group.cg-collapsed > h3::after{ transform: rotate(-90deg); }
#coverApp .control-panel .control-group.cg-collapsed > *:not(h3){ display: none !important; }
#coverApp .control-panel .control-group.cg-collapsed{ padding-bottom: 6px; margin-bottom: 5px; }
#coverApp .page-manager-toggle{
    padding: 4px 9px !important; font-size: 10px !important; background: #f1f5f9; color: #475569;
    border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer; font-weight: 700; white-space: nowrap;
}
#coverApp .page-manager-toggle:hover{ border-color: var(--accent-color); color: var(--accent-color); }
#coverApp .page-manager-toggle.active{ background: #eff6ff; border-color: var(--accent-color); color: var(--accent-color); }
#coverApp .page-manager.pm-collapsed .slot-grid-container,
#coverApp .page-manager.pm-collapsed .thumbnail-strip{ display: none; }
#coverApp .main-container{ align-items: stretch; }
#coverApp .page-manager.cover-thumbpanel{
    width: 150px; min-width: 100px; max-width: 640px; flex-shrink: 0;
    margin: 0 !important; padding: 0; border-radius: 0 !important; box-shadow: none;
    border-right: 1px solid var(--border-color);
    position: relative; overflow: visible; height: 100%;
}
#coverApp .cover-thumbpanel-header{
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 8px 10px; flex-shrink: 0; border-bottom: 1px solid var(--border-color);
}
#coverApp .cover-thumbpanel-header h2{ font-size: 12px; margin: 0; color: var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
#coverApp .cover-thumbpanel-actions{ display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
#coverApp .cover-thumbpanel-actions .top-btn{ padding: 2px 6px !important; font-size: 9px !important; }
#coverApp .cover-thumbpanel-scroll{ flex: 1; min-height: 0; overflow-y: auto; padding: 5px 6px 10px; }
#coverApp .cover-thumbpanel .slot-grid-container{
    display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid #e2e8f0;
    margin-bottom: 3px; padding-bottom: 3px; overflow: visible;
}
#coverApp .cover-thumbpanel .slot-box{
    flex: none; min-width: 0; flex-direction: row; align-items: center; justify-content: space-between;
    padding: 1px 5px; text-align: left; line-height: 1.15; gap: 4px;
}
#coverApp .cover-thumbpanel .slot-box label{ margin-bottom: 0; font-size: 10.5px; line-height: 1.15; flex-shrink: 0; }
#coverApp .cover-thumbpanel .slot-status{ margin-top: 0; font-size: 10.5px; line-height: 1.15; text-align: right; color: var(--accent-color); flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#coverApp .cover-thumbpanel .thumbnail-strip{
    display: grid; grid-template-columns: 1fr; gap: 4px;
    overflow: visible; padding: 0;
}
#coverApp .cover-thumbpanel .thumb-wrapper{ width: auto; height: auto; aspect-ratio: 3 / 4; max-width: var(--cover-thumb-w, 80px); }
#coverApp .cover-thumbpanel .thumb-num{ position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0; font-size: 8px; line-height: 1.3; text-align: center; background: rgba(255,255,255,.78); pointer-events: none; }
#coverApp .cover-thumbpanel-resize-handle{
    position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; background: transparent;
}
#coverApp .cover-thumbpanel-resize-handle::after{ content: ""; position: absolute; top: 0; right: 3px; width: 3px; height: 100%; background: transparent; transition: background .15s; }
#coverApp .cover-thumbpanel-resize-handle:hover::after,
body.resizing-thumbpanel .cover-thumbpanel-resize-handle::after{ background: var(--accent-color); }
#coverApp .page-manager.cover-thumbpanel.pm-collapsed{ width: 0 !important; min-width: 0 !important; border-right: none; }
#coverApp .page-manager.cover-thumbpanel.pm-collapsed > *{ display: none !important; }
#coverApp .preview-header{ flex-wrap: wrap; gap: 5px 10px; row-gap: 4px; }
#coverApp .preview-header .ph-group{ display: flex; align-items: center; gap: 5px; }
#coverApp .preview-header .canvas-toolbar{ margin: 0 !important; }
aside{padding:0!important;border:0!important;background:transparent!important}
aside .hide{display:none!important}
aside #cropApp,aside #coverApp{display:block;height:auto!important;min-height:0!important;width:auto!important;padding:0!important;margin:0!important;background:transparent}
aside #cropApp .crop-layout{padding:0!important;display:block!important;width:auto!important}
aside #cropApp .crop-sidebar,aside #coverApp .control-panel{width:auto!important;max-width:100%!important;height:auto!important;max-height:none!important;position:static!important;border-radius:3px}
.mode:focus-visible{outline:3px solid var(--acc)}

#hero h1{margin:0 0 4px;font-size:21px;letter-spacing:-.3px}
#hero p{margin:0 0 10px;color:var(--soft);font-size:13px;line-height:1.55}
.steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 4px;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--line);background:var(--panel);padding:4px 10px 4px 5px;border-radius:3px}
.steps b{background:var(--acc);color:#fff;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
#hero.compact p,#hero.compact .steps{display:none}#hero.compact h1{font-size:15px;margin:0}
.vhead{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12px;margin-bottom:6px}.vhead label{cursor:pointer}
.vz{margin-left:auto;display:flex;gap:4px;align-items:center}.vz button{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:12px;padding:3px 9px;border-radius:3px;cursor:pointer}
.vwrap{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.vrw{flex:1;min-width:0;display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-rows:20px clamp(360px,64vh,760px);border:1px solid var(--line);background:#EDEAE0}
.vcorner{background:#EFEBDF;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
#rtop{position:relative;overflow:hidden;background:#EFEBDF;border-bottom:1px solid var(--line)}
#rleft{position:relative;overflow:hidden;background:#EFEBDF;border-right:1px solid var(--line)}
#rtop canvas,#rleft canvas{position:absolute;top:0;left:0;display:block}
#vstage{position:relative;overflow:hidden;cursor:grab;touch-action:none;background:repeating-conic-gradient(#e6e3d8 0 25%,#f1efe7 0 50%) 0 0/16px 16px}
#vstage.dragging{cursor:grabbing}#vstage.zooming{cursor:zoom-in}#vstage.zoomout{cursor:zoom-out}#vstage.spacepan{cursor:grab}
#vcontent{position:absolute;left:0;top:0;transform-origin:0 0}
#vcan{display:block;box-shadow:0 2px 8px rgba(0,0,0,.28);background:#fff}
#vZl{min-width:44px;text-align:center;font-size:12px}
.vside{flex:0 0 190px}.vside canvas{width:180px;height:180px;border:1px solid var(--line);background:#fff;image-rendering:pixelated}
.leg{font-size:11.5px;margin-top:8px;line-height:1.9;color:var(--soft)}.leg i{display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle}

/* ===== 여백·톤 정리 (리디자인) ===== */
body{background:#F3F1EA;-webkit-font-smoothing:antialiased}
header{background:var(--panel);color:var(--ink);border-bottom:1px solid #E4E0D4;padding:14px max(24px,calc((100% - 1180px)/2 + 24px));font-size:14px;letter-spacing:-.2px}
header i{box-shadow:0 0 0 4px rgba(14,124,134,.14)}header span{color:var(--soft);font-size:12px}
.wrap{max-width:1180px;margin:0 auto;padding:36px 24px 80px;gap:28px}
.wrap.has-menu{grid-template-columns:minmax(0,1fr) 300px}
main{gap:20px!important}
.card{border-radius:12px;border:1px solid #E6E2D6;box-shadow:0 1px 2px rgba(24,31,38,.04),0 8px 24px rgba(24,31,38,.045);padding:20px 22px}
#hero{padding:6px 2px 10px}
#hero h1{font-size:28px;letter-spacing:-.8px;margin:0 0 8px}
#hero p{font-size:14.5px;margin:0 0 18px;max-width:640px}
#hero.compact{padding:0 2px}#hero.compact h1{font-size:17px;letter-spacing:-.3px}
.steps li{border-radius:999px;padding:6px 14px 6px 7px;font-size:12.5px;box-shadow:0 1px 2px rgba(24,31,38,.04)}
#drop{border-radius:14px;border:1.5px dashed #BDB6A2;padding:44px 20px;background:var(--panel)}
#drop b{font-size:15px}#drop small{font-size:12.5px}
#drop.compact{padding:12px 16px;border-radius:10px}
#info{gap:10px 26px}#info .n{font-size:14.5px}
.th canvas{border-radius:3px;border-color:#DAD5C6}
.strip-h{font-size:12px;margin:0 0 8px}
.met{border-radius:8px;background:#FAF9F5;border-color:#E6E2D6;padding:10px 12px}
.sec{margin-top:22px;padding-top:18px;border-top-color:#E6E2D6}
.mode{border-radius:12px;padding:16px 18px;border-width:1.5px;border-color:#DDD8C8;transition:.15s}
.mode b{font-size:14.5px}.mode span{font-size:12px}
.mode:hover{box-shadow:0 4px 14px rgba(24,31,38,.08)}
.modes{gap:14px}
.lst,.flist{border-radius:8px;border-color:#E6E2D6}
.vrw{border-radius:8px;overflow:hidden;border-color:#DDD8C8}
.vhead{gap:8px 16px;margin-bottom:10px}
aside{top:20px!important}
aside #cropApp .crop-layout .crop-sidebar,aside #coverApp .control-panel{border-radius:12px!important;border:1px solid #E6E2D6!important;background:var(--panel)!important;box-shadow:0 1px 2px rgba(24,31,38,.04),0 8px 24px rgba(24,31,38,.045);overflow:hidden;padding:16px 16px!important}
aside #coverApp .control-panel{background:var(--panel)}

/* 액션 버튼 한 줄 배치 */
#cropApp .action-row{ margin-top:auto; border:none !important; background:transparent !important; padding:0 !important; }
#cropApp .action-btns{ display:flex; gap:8px; }
#cropApp .crop-layout .crop-sidebar .action-btns button{ flex:1 1 0; min-width:0; height:40px !important; padding:0 6px; font-size:12px !important; white-space:nowrap; }
#cropApp #crop-downloadAllBtn{ background:#2B2620; }
#cropApp #sendToCoverBtn{ background:#0E7C86; }
#cropApp #sendToCoverBtn:hover:not(:disabled){ background:#0A646C; }
#cropApp #crop-downloadAllBtn .dl-btn-fill{ background:#0E7C86; }
#pcToast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#2B2620;color:#fff;padding:10px 16px;border-radius:6px;font-size:13px;z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s}
#pcToast.on{opacity:1}

/* 컴팩트 정리: 블리드/DPI 한 줄, 미러 인셋 입력+프리셋 한 줄 */
#cropApp .pair-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#cropApp .pair-row .control-group{ min-width:0; }
#cropApp .inline-row{ display:flex; gap:4px; align-items:stretch; }
#cropApp .inline-row input[type=number]{ flex:0 0 56px; width:56px !important; min-width:0; padding:4px 6px !important; }
#cropApp .inline-row .mini-btn{ flex:1 1 0; min-width:0; }
#cropApp .pair-row input[type=number]{ padding:5px 8px !important; }

/* ===== 겉면/속면 버튼 · 메뉴 아래 배치 ===== */
.seg{display:inline-flex;gap:0;border:1px solid var(--acc);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--panel);color:var(--ink);font:inherit;font-size:12.5px;padding:6px 14px;cursor:pointer;display:flex;align-items:baseline;gap:6px}
.seg button+button{border-left:1px solid var(--acc)}
.seg button small{font-size:10.5px;color:var(--soft)}
.seg button.on{background:var(--acc);color:#fff}.seg button.on small{color:#e3f3f3}
.seg button.dis:not(.on){opacity:.45;background:#EFEDE4;cursor:not-allowed}

/* 표지 면 배정: 뷰어 위 가로 패널 */
#coverTop .control-group{margin:0;padding:0;border:0;background:transparent}
#coverTop h3{margin:0 0 10px;font-size:13px;color:var(--acc)}
#coverTop .info-box{background:#ecfdf5;border:1px solid #10b981;color:#047857;padding:8px 12px;border-radius:8px;font-weight:700;font-size:12px;margin-bottom:12px;line-height:1.6}
#coverTop .slotgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px}
#coverTop .slotgrid label{font-size:11.5px}#coverTop .slotgrid select{font-size:12px;padding:6px 8px}
@media(max-width:900px){#coverTop .slotgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 다운로드 2버튼 · 내지 펼침 미리보기 */
.dlrow{display:flex;gap:6px}.dlrow .btn-export{flex:1;min-width:0;white-space:nowrap}
#coverApp #exportInnerBtn{background:#4338ca}
#coverApp .btn-export:disabled{opacity:.5;cursor:not-allowed}
.ivc{font-weight:400;color:var(--soft);font-size:11.5px}
.ivst{font-size:11.5px;padding:3px 9px;border-radius:999px}.ivst.ok{background:#ecfdf5;color:#047857}.ivst.warn{background:#fff7ed;color:#c2410c}
.ivbody{max-height:540px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding:10px;background:#EDEAE0;border:1px solid var(--line);border-radius:8px}
.ivbody.single{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.ivs{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
.ivs .ivp+.ivp{border-left:2px solid #b9b2a0}
.ivp{padding:0 1px}.ivp canvas{display:block;width:100%;height:auto;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.ivp.blank .ivph{width:100%;border:1px dashed #b9b2a0;border-radius:2px;opacity:.5}
.ivl{text-align:center;font-size:10.5px;color:var(--soft);padding:3px 0}.ivl.L{color:#2563eb}.ivl.R{color:var(--acc)}
.ivmsg{padding:20px;color:var(--soft)}

.ivacts{display:inline-flex;gap:6px;flex-wrap:wrap}
.ivacts button{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:11.5px;padding:4px 10px;border-radius:6px;cursor:pointer}
.ivacts button:hover{border-color:var(--acc);color:var(--acc)}
.ivp{position:relative}
.ivtool{position:absolute;top:4px;left:5px;right:5px;display:flex;justify-content:space-between;gap:4px;opacity:0;transition:opacity .12s;pointer-events:none}
.ivp:hover .ivtool,.ivp:focus-within .ivtool{opacity:1}.ivtool button{pointer-events:auto}
@media(hover:none){.ivtool{opacity:1}}
.ivtool button{border:0;border-radius:5px;background:rgba(24,31,38,.86);color:#fff;font:inherit;font-size:10.5px;padding:3px 7px;cursor:pointer}
.ivtool button[data-a=del]:hover{background:#dc2626}.ivtool button[data-a=before]:hover{background:var(--acc)}
.ivp.isbl canvas{outline:1px dashed #9a927d}.ivp.isbl .ivl{color:#c77d12}
.ivbody.single .ivtool button[data-a=before]{font-size:0;padding:3px 6px}.ivbody.single .ivtool button[data-a=before]::before{content:'＋';font-size:11px}

/* 페이지 이동: 끌기 · 경계선 · 부드러운 전환 */
.ivbody{position:relative;scroll-behavior:auto}
.ivp{cursor:grab;transition:opacity .18s,transform .18s,box-shadow .18s}
.ivbody.dragmode,.ivbody.dragmode .ivp{cursor:grabbing;user-select:none;-webkit-user-select:none}
.ivp.dragging{opacity:.28;transform:scale(.97)}
.ivp.dropt canvas{box-shadow:0 0 0 2px rgba(14,124,134,.55),0 2px 10px rgba(14,124,134,.35)}
.ivghost{position:fixed;z-index:9999;pointer-events:none;height:auto;background:#fff;border-radius:3px;opacity:.92;box-shadow:0 14px 34px rgba(0,0,0,.34);transform:rotate(2.2deg) scale(1.04);transform-origin:50% 50%}
.ivdrop{position:absolute;width:4px;border-radius:3px;background:var(--acc);box-shadow:0 0 0 3px rgba(14,124,134,.22),0 0 14px rgba(14,124,134,.75);pointer-events:none;z-index:6;transition:left .12s ease,top .12s ease,height .12s ease;animation:ivpulse 1s ease-in-out infinite}
@keyframes ivpulse{50%{box-shadow:0 0 0 5px rgba(14,124,134,.12),0 0 18px rgba(14,124,134,.9)}}
.ivgrip{display:inline-flex;align-items:center;justify-content:center;width:26px;background:rgba(24,31,38,.86);color:#fff;border-radius:5px;font-size:13px;line-height:1;touch-action:none;cursor:grab;pointer-events:auto}
.ivtool{align-items:stretch}
@media(prefers-reduced-motion:reduce){.ivp,.ivdrop{transition:none;animation:none}}

/* 내지 미리보기: 낱장 터잡기처럼 페이지 번호 크게 (뷰어 전용) */
.ivnum{position:absolute;left:50%;top:calc((100% - 20px) / 2);transform:translate(-50%,-50%);background:rgba(255,255,255,.9);color:#B8241F;font-size:20px;font-weight:800;line-height:1.2;padding:4px 10px;border-radius:4px;border:2px solid #B8241F;pointer-events:none;z-index:3}
.ivbody.single .ivnum{font-size:14px;padding:2px 7px;border-width:1.5px}
.ivp.isbl .ivnum{opacity:.55}
body.hide-face-labels .ivnum{display:none}