:root{
  color-scheme:light;
  --bg:#e9edf3;
  --panel:#ffffff;
  --panel-soft:#f7f8fa;
  --line:#dde2ea;
  --line-dark:#c8ced8;
  --text:#1d2635;
  --muted:#738094;
  --brand:#3157d5;
  --brand-soft:#e8edff;
  --success:#17875d;
  --danger:#ca4b50;
  --shadow:0 18px 45px rgba(27,39,61,.13);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  overflow:hidden;
  font-family:Inter,Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);background:var(--bg);font-size:13px
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.app-shell{height:100vh;display:flex;flex-direction:column;min-width:1120px}
.topbar{
  height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 14px;background:#131923;color:#fff;border-bottom:1px solid #27303d
}
.brand-group,.brand,.top-actions{display:flex;align-items:center}
.brand-group{gap:10px}.brand{display:block}
.brand strong{display:block;font-size:14px}.brand span{display:block;color:#8d98aa;font-size:9px;margin-top:1px}
.back-link{
  width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:1px solid #343d4c;
  color:#ccd4e1;text-decoration:none;background:#202733
}
.top-actions{gap:7px}.top-separator{height:22px;width:1px;background:#343d4b;margin:0 2px}
.top-btn{
  border:1px solid #394352;border-radius:7px;background:#232b38;color:#e9edf5;padding:8px 10px
}
label.top-btn{display:inline-flex;align-items:center}
.top-btn:hover{background:#2b3543}.top-btn.primary{background:#3157d5;border-color:#3157d5}
.top-btn.success{background:#16845c;border-color:#16845c}.icon-btn{width:34px;padding:8px 0}
.top-btn:disabled{opacity:.35;cursor:not-allowed}

.workspace{flex:1;min-height:0;display:grid;grid-template-columns:220px minmax(550px,1fr) 280px}
.sidebar{background:var(--panel);min-width:0;overflow:hidden}
.pages-panel{border-right:1px solid var(--line);display:flex;flex-direction:column}
.inspector{border-left:1px solid var(--line);display:flex;flex-direction:column}
.panel-head{
  min-height:62px;padding:13px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px
}
.panel-head h2{font-size:12px;margin:0 0 3px}.panel-head p{font-size:9px;color:var(--muted);margin:0}
.small-icon-btn{
  width:30px;height:30px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#4d596b
}
.small-icon-btn:hover{background:#f4f6f9}.small-icon-btn.danger{color:var(--danger)}
.page-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:9px;border-bottom:1px solid var(--line)}
.page-actions button{
  border:1px solid var(--line);border-radius:6px;background:#fafbfc;padding:6px;font-size:9px;color:#596476
}
.page-actions button:hover{border-color:#aeb9cb;background:#f1f4f8}.page-actions .danger{color:var(--danger)}
.thumbnail-list{flex:1;overflow:auto;padding:10px;display:grid;gap:10px;align-content:start}
.thumb{
  position:relative;border:2px solid transparent;border-radius:9px;background:#f1f3f7;padding:6px;cursor:pointer;
  transition:.12s
}
.thumb:hover{border-color:#b9c5dc}.thumb.active{border-color:var(--brand);background:#eef2ff}
.thumb.dragging{opacity:.45}.thumb.drop-before{box-shadow:0 -3px 0 var(--brand)}.thumb.drop-after{box-shadow:0 3px 0 var(--brand)}
.thumb canvas{display:block;width:100%;height:auto;background:#fff;box-shadow:0 2px 8px rgba(20,30,50,.12)}
.thumb-meta{display:flex;align-items:center;justify-content:space-between;margin-top:5px;color:#657083;font-size:8px}
.thumb-handle{color:#a1a9b7;letter-spacing:-.1em}
.privacy-note{margin:8px;padding:10px;border-radius:8px;background:#f7f9fb;border:1px solid var(--line);font-size:8px;color:var(--muted);line-height:1.45}
.privacy-note strong{display:block;color:#4c586b;margin-bottom:3px}.privacy-note p{margin:0}

.editor{min-width:0;min-height:0;display:flex;flex-direction:column;background:#dfe4ea}
.toolbar{
  height:54px;flex:0 0 54px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 10px;background:#fafbfc;border-bottom:1px solid var(--line)
}
.tool-group{display:flex;align-items:center;gap:4px}
.tool{
  min-width:46px;height:42px;border:1px solid transparent;border-radius:7px;background:transparent;color:#5b6575;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px 5px
}
label.tool{cursor:pointer}.tool span{font-size:15px;font-weight:700;line-height:1}.tool small{font-size:7px}
.tool:hover{background:#f0f3f7}.tool.active{background:var(--brand-soft);border-color:#c5d0f6;color:var(--brand)}
.toolbar-right{display:flex;align-items:center;gap:4px}
.zoom-btn,.fit-btn{
  border:1px solid var(--line);background:#fff;border-radius:6px;height:30px;color:#596476
}
.zoom-btn{width:30px}.fit-btn{font-size:8px;padding:0 8px}.zoom-label{min-width:46px;text-align:center;font-size:9px;color:#667085}

.stage{
  flex:1;min-height:0;overflow:auto;position:relative;padding:26px;display:flex;align-items:flex-start;justify-content:center;
  background:
    linear-gradient(45deg,#d7dce3 25%,transparent 25%),
    linear-gradient(-45deg,#d7dce3 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#d7dce3 75%),
    linear-gradient(-45deg,transparent 75%,#d7dce3 75%);
  background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0
}
.empty-state{
  margin:auto;width:min(560px,90%);padding:42px 32px;border-radius:18px;text-align:center;background:rgba(255,255,255,.93);
  border:1px solid #d6dce5;box-shadow:var(--shadow)
}
.empty-icon{
  width:70px;height:70px;margin:0 auto 16px;display:grid;place-items:center;border-radius:18px;
  background:linear-gradient(135deg,#3157d5,#7e68ed);color:#fff;font-weight:900;font-size:18px;box-shadow:0 12px 30px rgba(49,87,213,.22)
}
.empty-state h1{font-size:23px;margin:0 0 10px}.empty-state p{color:var(--muted);line-height:1.65;margin:0 auto 20px;max-width:460px}
.empty-open-btn{
  display:inline-flex;background:var(--brand);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;cursor:pointer
}
.page-viewport{position:relative;flex:0 0 auto}
.page-wrap{
  position:relative;background:#fff;box-shadow:0 20px 50px rgba(30,40,60,.24);transform-origin:top center;
  user-select:none;touch-action:none
}
#pdfCanvas{display:block;width:100%;height:100%}
.text-hit-layer,.overlay-layer,.draw-preview{position:absolute;inset:0;width:100%;height:100%}
.text-hit-layer{z-index:2;pointer-events:none}.overlay-layer{z-index:3;pointer-events:none}.draw-preview{z-index:4;pointer-events:none;overflow:visible}
.text-hit{
  position:absolute;border:1px dashed transparent;background:transparent;pointer-events:auto;cursor:text
}
.page-wrap.edit-text-mode .text-hit:hover{border-color:#4f7cf0;background:rgba(49,87,213,.08)}
.overlay-item{
  position:absolute;pointer-events:auto;cursor:move;transform-origin:center;border:1px solid transparent
}
.overlay-item.selected{outline:2px solid #3157d5;outline-offset:2px}
.overlay-item.text-overlay{
  display:flex;align-items:flex-start;white-space:pre-wrap;overflow:hidden;line-height:1.2;padding:2px
}
.overlay-item.rect-overlay,.overlay-item.highlight-overlay{border-style:solid}
.overlay-item.image-overlay img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.overlay-item .resize-handle{
  position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border-radius:50%;background:#3157d5;border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:nwse-resize
}
.overlay-item .move-chip{
  position:absolute;left:2px;top:2px;font-size:7px;padding:2px 3px;border-radius:3px;background:rgba(15,23,42,.55);color:#fff;pointer-events:none
}
.freehand-overlay{position:absolute;pointer-events:auto;overflow:visible;cursor:pointer}
.freehand-overlay.selected{filter:drop-shadow(0 0 1px #3157d5)}

.statusbar{
  height:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;background:#fafbfc;border-top:1px solid var(--line);font-size:8px;color:var(--muted)
}

.inspector-head{flex:0 0 62px}.no-selection{padding:18px 14px;color:var(--muted);font-size:10px;line-height:1.6}
.no-selection strong{display:block;color:#4d596a;margin-bottom:5px}.no-selection p{margin:0}
.inspector-scroll{flex:1;overflow:auto}
.control-section{padding:13px 14px;border-bottom:1px solid var(--line)}
.control-section h3{margin:0 0 10px;font-size:10px;color:#4b5668}
.control-section label{display:block;font-size:8px;color:var(--muted);margin-bottom:9px}
.control-section input,.control-section textarea,.control-section select{
  width:100%;margin-top:4px;border:1px solid var(--line);border-radius:6px;background:#fbfcfd;padding:7px;font-size:10px;outline:none
}
.control-section input:focus,.control-section textarea:focus,.control-section select:focus{border-color:#93a8ec;box-shadow:0 0 0 2px #edf1ff}
.control-section textarea{resize:vertical}
.two-col,.color-grid,.four-grid{display:grid;gap:7px}
.two-col,.color-grid{grid-template-columns:1fr 1fr}.four-grid{grid-template-columns:1fr 1fr}
.color-grid input[type=color]{height:34px;padding:3px}
.range-row{display:flex;align-items:center;gap:8px}.range-row input{margin-top:4px}.range-row span{min-width:32px;text-align:right;font-size:8px;color:#596476}
.arrange-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.arrange-row button{border:1px solid var(--line);border-radius:6px;background:#f8f9fb;padding:7px;font-size:8px}
.hint-section{background:#fff9ed}.hint-section p{margin:0;color:#8a6c36;font-size:8px;line-height:1.5}
.shortcuts{margin:10px;padding:10px;border-radius:8px;background:#f7f8fa;border:1px solid var(--line);font-size:8px;color:var(--muted);line-height:1.5}
.shortcuts strong{color:#536073}.shortcuts p{margin:4px 0}.shortcuts kbd{padding:1px 4px;border:1px solid #cfd5df;border-bottom-width:2px;border-radius:4px;background:#fff;color:#556070}

.modal{position:fixed;inset:0;z-index:1000;background:rgba(10,15,24,.58);display:grid;place-items:center;padding:20px}
.modal-card{width:min(760px,96vw);background:#fff;border-radius:16px;box-shadow:0 25px 70px rgba(0,0,0,.3);overflow:hidden}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:14px;margin:0 0 4px}.modal-head p{font-size:9px;color:var(--muted);margin:0}
.modal-head button{border:0;background:transparent;font-size:22px;color:#697386}
#signatureCanvas{display:block;width:calc(100% - 36px);height:260px;margin:18px;background:#fbfbfc;border:1px dashed #cbd2dc;border-radius:10px;touch-action:none}
.signature-actions{display:flex;justify-content:flex-end;gap:7px;padding:0 18px 18px}
.signature-actions button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:8px 12px}
.signature-actions .primary{background:var(--brand);border-color:var(--brand);color:#fff}
.toast-root{position:fixed;right:14px;bottom:14px;z-index:2000;display:grid;gap:7px}
.toast{min-width:250px;max-width:390px;padding:10px 12px;border-radius:8px;background:#222a38;color:#fff;font-size:9px;box-shadow:var(--shadow)}
.toast.ok{background:#1d664e}.toast.error{background:#7a3136}

@media(max-width:1280px){
  .workspace{grid-template-columns:190px minmax(520px,1fr) 250px}
  .tool{min-width:42px}
}