*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c-bg:#f5f6f8;--c-surface:#ffffff;--c-border:#e2e5ea;
  --c-text:#1a1d23;--c-muted:#6b7280;--c-primary:#2563eb;
  --c-ok:#16a34a;--c-warn:#d97706;--c-err:#dc2626;
  --c-ok-bg:#f0fdf4;--c-warn-bg:#fffbeb;--c-err-bg:#fef2f2;
  --radius:10px;--shadow:0 1px 4px rgba(0,0,0,.08);
}
body{background:var(--c-bg);color:var(--c-text);font-family:'Apple SD Gothic Neo','Noto Sans KR',sans-serif;font-size:14px;line-height:1.6;}

/* ── 헤더 ── */
.header{background:var(--c-surface);border-bottom:1px solid var(--c-border);padding:0 1.25rem;height:52px;display:flex;align-items:center;gap:.75rem;position:sticky;top:0;z-index:50;}
.header h1{font-size:15px;font-weight:700;}
.hbg{font-size:10px;padding:2px 7px;border-radius:99px;background:#eff6ff;color:var(--c-primary);}
.hbs{font-size:10px;padding:2px 7px;border-radius:99px;background:#f0fdf4;color:var(--c-ok);}
.db-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:99px;white-space:nowrap;}
.db-ok{background:#dcfce7;color:#15803d;} .db-fail{background:#fee2e2;color:#b91c1c;} .db-unknown{background:#f3f4f6;color:#6b7280;}
.btn-reset{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:7px;border:1px solid var(--c-border);background:var(--c-surface);font-size:12px;font-weight:500;cursor:pointer;color:var(--c-muted);}
.btn-reset:hover{background:#fff0f0;border-color:#f7c1c1;color:var(--c-err);}
.btn-sm{padding:3px 9px;background:#f3f4f6;border:1px solid var(--c-border);border-radius:6px;font-size:12px;cursor:pointer;color:var(--c-text);}
.btn-sm:hover{background:#e5e7eb;}
.active-nav{background:#eff6ff;color:var(--c-primary);border-color:#bfdbfe;}

/* ── 파일+품질 2컬럼 ── */
.file-qa-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:.75rem 1.25rem;}
.file-qa-col{display:flex;flex-direction:column;gap:6px;}

/* ── 드롭존 ── */
.dz{border:2px dashed var(--c-border);border-radius:var(--radius);padding:.75rem;text-align:center;cursor:pointer;min-height:75px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:border-color .12s,background .12s;}
.dz:hover,.dz.over{background:#eff6ff;border-color:var(--c-primary);}
.dz.ok{border-style:solid;border-color:var(--c-primary);background:#E6F1FB14;}
.dz i.mi{font-size:18px;color:var(--c-muted);} .dz.ok i.mi{color:var(--c-primary);}
.dz h3{font-size:12px;font-weight:600;} .dz p{font-size:10px;color:var(--c-muted);}
.dz .hint{font-size:10px;color:#9ca3af;} .dz input{display:none;}

/* ── 인쇄품질 박스 ── */
.qa-box{background:#f9fafb;border-radius:var(--radius);border:1px solid var(--c-border);overflow:hidden;display:none;}
.qa-box.visible{display:block;}
.qa-box-title{font-size:11px;font-weight:600;padding:.45rem .65rem;border-bottom:1px solid var(--c-border);display:flex;align-items:center;gap:5px;background:var(--c-surface);}
.qa-loading{padding:.6rem;text-align:center;font-size:11px;color:var(--c-muted);display:flex;align-items:center;justify-content:center;gap:5px;}
.qa-row{display:flex;align-items:center;justify-content:space-between;padding:.38rem .65rem;border-bottom:1px solid var(--c-border);font-size:11px;gap:6px;}
.qa-row:last-child{border-bottom:none;}
.qa-row-label{color:var(--c-muted);white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:4px;}
.qbadge{font-size:10px;padding:1px 6px;border-radius:99px;white-space:nowrap;flex-shrink:0;}
.qbadge.ok{background:var(--c-ok-bg);color:var(--c-ok);}
.qbadge.warn{background:var(--c-warn-bg);color:var(--c-warn);}
.qbadge.err{background:var(--c-err-bg);color:var(--c-err);}
.qbadge.info{background:#eff6ff;color:var(--c-primary);}
.qbadge.neutral{background:#f3f4f6;color:var(--c-muted);border:1px solid var(--c-border);}

/* ── 색상 섹션 ── */
.cs-section{border-bottom:1px solid var(--c-border);} .cs-section:last-child{border-bottom:none;}
.cs-header{font-size:10px;font-weight:600;padding:.3rem .65rem;display:flex;align-items:center;justify-content:space-between;background:var(--c-surface);}
.cs-header.cmyk-h{color:#0074C8;} .cs-header.rgb-h{color:#E24B4A;} .cs-header.spot-h{color:#7B5EA7;} .cs-header.gray-h{color:var(--c-muted);}
.cs-items{padding:.3rem .65rem .4rem;display:flex;flex-direction:column;gap:4px;}
.cs-item{display:flex;align-items:center;gap:6px;font-size:11px;}
.cs-chip{width:14px;height:14px;border-radius:3px;flex-shrink:0;border:1px solid rgba(0,0,0,.15);}
.cs-vals{font-size:10px;font-family:monospace;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.cs-badge{font-size:9px;padding:1px 5px;border-radius:99px;flex-shrink:0;}
.cs-badge.cmyk-b{background:#E3F2FD;color:#0074C8;}
.cs-badge.rgb-b{background:#FFF0F0;color:#E24B4A;}
.cs-badge.spot-b{background:#F3EEFF;color:#7B5EA7;border:1px dashed #7B5EA7;}
.cs-badge.gray-b{background:#f3f4f6;color:var(--c-muted);}
.font-mini{font-size:10px;color:var(--c-muted);padding:.3rem .65rem;border-bottom:1px solid var(--c-border);line-height:1.6;max-height:60px;overflow-y:auto;}
.bc-mini{font-size:10px;padding:.38rem .65rem;display:flex;flex-direction:column;gap:3px;}
.bc-mini-item{display:flex;align-items:center;gap:5px;}
.bc-thumb-sm{width:32px;height:32px;border-radius:3px;overflow:hidden;flex-shrink:0;background:#fff;border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;}
.bc-thumb-sm canvas{display:block;width:32px;height:32px;}

/* ── 툴바 ── */
.toolbar{padding:.45rem 1.25rem;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);background:#f9fafb;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.tlbl{font-size:11px;color:var(--c-muted);white-space:nowrap;}
.pills{display:flex;gap:3px;flex-wrap:wrap;}
.pill{display:flex;align-items:center;gap:3px;font-size:11px;padding:2px 7px;border:1px solid var(--c-border);border-radius:99px;cursor:pointer;user-select:none;background:var(--c-surface);}
.pill.on{background:#f0fdf4;border-color:#86efac;color:var(--c-ok);}
.pill input{width:11px;height:11px;cursor:pointer;}
.sens-wrap{display:flex;align-items:center;gap:4px;margin-left:3px;border-left:1px solid var(--c-border);padding-left:8px;}
.sens-wrap label{font-size:11px;color:var(--c-muted);}
.sens-wrap select{font-size:11px;padding:2px 4px;border:1px solid var(--c-border);border-radius:6px;background:var(--c-surface);cursor:pointer;}
.btn-go{margin-left:auto;padding:5px 14px;border-radius:8px;border:1px solid var(--c-border);background:var(--c-surface);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap;}
.btn-go:hover:not(:disabled){background:#eff6ff;border-color:var(--c-primary);color:var(--c-primary);}
.btn-go:disabled{opacity:.4;cursor:not-allowed;}

/* ── 탭 ── */
.tabs{display:flex;border-bottom:1px solid var(--c-border);background:#f9fafb;}
.tab{padding:.4rem .9rem;font-size:11px;cursor:pointer;border-bottom:2px solid transparent;color:var(--c-muted);white-space:nowrap;display:flex;align-items:center;gap:3px;}
.tab.active{color:var(--c-text);border-bottom-color:var(--c-primary);background:var(--c-surface);}
.tc{display:none;} .tc.active{display:block;}

/* ── 나란히 보기 ── */
.side-wrap{display:grid;grid-template-columns:1fr 1fr;}
.vp{padding:.45rem .75rem;border-right:1px solid var(--c-border);}
.vp:last-child{border-right:none;}
.vt{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);margin-bottom:3px;}
.cvw{position:relative;background:#f9fafb;border-radius:8px;overflow:hidden;min-height:240px;display:flex;align-items:center;justify-content:center;}
.cvw canvas{display:block;width:100%;height:auto;}
.ph{color:#9ca3af;font-size:12px;text-align:center;padding:1.2rem;pointer-events:none;}

/* ── 합성 하이라이트 뷰어 ── */
.mw{padding:.5rem .75rem;}
.mw-sub{font-size:10px;color:var(--c-muted);margin-bottom:4px;display:flex;align-items:center;gap:4px;}
.merge-viewer{position:relative;background:#f9fafb;border-radius:8px;overflow:hidden;height:500px;display:flex;align-items:center;justify-content:center;user-select:none;}
.merge-viewer.panning{cursor:grabbing;} .merge-viewer:not(.panning){cursor:grab;}
#merge-canvas-container{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;}
#cvm{display:block;}
.zoom-bar{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);border-radius:99px;padding:5px 10px;z-index:10;}
.zoom-btn{width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .12s;}
.zoom-btn:hover{background:rgba(255,255,255,.32);}
.zoom-pct{color:#fff;font-size:11px;font-weight:600;min-width:44px;text-align:center;}
.zoom-fit-btn{color:#fff;font-size:10px;font-weight:500;padding:0 8px;height:24px;border-radius:99px;border:none;background:rgba(255,255,255,.15);cursor:pointer;white-space:nowrap;transition:background .12s;}
.zoom-fit-btn:hover{background:rgba(255,255,255,.32);}

/* ── 네비게이션 ── */
.nav{display:flex;align-items:center;justify-content:center;gap:5px;padding:.3rem;border-top:1px solid var(--c-border);}
.nav button{width:22px;height:22px;border:1px solid var(--c-border);border-radius:6px;background:var(--c-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.nav button:hover{background:#f3f4f6;} .nav button:disabled{opacity:.3;cursor:not-allowed;}

/* ── 결과 ── */
.result{padding:.75rem 1.25rem;border-top:1px solid var(--c-border);}
.result h3{font-size:13px;font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:5px;}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:7px;}
.sc{background:#f9fafb;border-radius:8px;padding:.4rem;text-align:center;border:1px solid var(--c-border);}
.sc .n{font-size:16px;font-weight:700;} .sc .l{font-size:10px;color:var(--c-muted);margin-top:1px;}
.sc.w .n{color:var(--c-warn);} .sc.d .n{color:var(--c-err);} .sc.ok .n{color:var(--c-ok);}
.legend{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px;}
.li{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--c-muted);}
.ld{width:9px;height:9px;border-radius:2px;}
.dlist{display:flex;flex-direction:column;gap:3px;max-height:140px;overflow-y:auto;}
.di{display:flex;align-items:flex-start;gap:5px;padding:.35rem .5rem;border-radius:7px;border:1px solid var(--c-border);font-size:11px;cursor:pointer;}
.di:hover{background:#f9fafb;}
.di .dot{width:7px;height:7px;border-radius:50%;margin-top:3px;flex-shrink:0;}
.di.spacing-t .dot,.di.text-t .dot{background:#ff3a6e;}
.di.img-t .dot{background:#EF9F27;} .di.color-t .dot{background:#378ADD;} .di.layout-t .dot{background:#7F77DD;}
.di .inf{flex:1;} .di .inf .tt{font-weight:600;} .di .inf .dd{color:var(--c-muted);font-size:10px;margin-top:1px;}
.di .pg{font-size:10px;color:var(--c-muted);white-space:nowrap;}

/* ── 모달 ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:200;}
.modal{background:var(--c-surface);border-radius:var(--radius);padding:1.4rem 1.5rem;width:290px;box-shadow:0 8px 32px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:12px;}
.modal h2{font-size:14px;font-weight:600;} .modal p{font-size:12px;color:var(--c-muted);line-height:1.6;}
.modal-btns{display:flex;gap:8px;justify-content:flex-end;}
.modal-btns button{padding:5px 14px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--c-border);}
.modal-cancel{background:#f3f4f6;color:var(--c-text);} .modal-cancel:hover{background:#e5e7eb;}
.modal-confirm{background:var(--c-err);color:#fff;border-color:var(--c-err);} .modal-confirm:hover{background:#b91c1c;}

/* ── 이력 ── */
.history-list{display:flex;flex-direction:column;gap:.75rem;}
.history-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow);}
.hc-status{font-size:20px;flex-shrink:0;} .hc-info{flex:1;min-width:0;}
.hc-label{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hc-files{font-size:12px;color:var(--c-muted);margin-top:2px;}
.hc-date{font-size:11px;color:#9ca3af;flex-shrink:0;}
.hc-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;flex-shrink:0;}
.st-ok{background:var(--c-ok-bg);color:var(--c-ok);} .st-warn{background:var(--c-warn-bg);color:var(--c-warn);} .st-err{background:var(--c-err-bg);color:var(--c-err);}

/* ── 공통 ── */
.empty{text-align:center;padding:1.5rem;color:#9ca3af;font-size:12px;}
.loading{text-align:center;padding:2rem;color:var(--c-muted);}
.notice{padding:.85rem 1.1rem;border-radius:8px;font-size:13px;margin-bottom:1rem;}
.notice-warn{background:var(--c-warn-bg);border:1px solid #fde68a;color:#78350f;}
.prog{padding:.75rem 1.25rem;}
.pbar{height:4px;background:#e5e7eb;border-radius:99px;margin-top:4px;overflow:hidden;}
.pfill{height:100%;background:var(--c-primary);border-radius:99px;transition:width .15s;}

@media(max-width:600px){
  .file-qa-row{grid-template-columns:1fr;}
  .side-wrap{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(3,1fr);}
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}