*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;overflow:hidden}

[data-theme="light"]{
  --bg:#f4f5f7;--surface:#fff;--surface2:#f0f2f5;--surface3:#e4e7ec;
  --border:#e2e5ea;--border2:#c8cdd6;--text:#1a1d23;--text2:#6b7280;--text3:#9ca3af;
  --accent:#2563eb;--accent-bg:#eff4ff;--accent-h:#1d4ed8;
  --red:#ef4444;--shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.06);
  --canvas-bg:#dde0e6;--topbar:#fff;
}
[data-theme="dark"]{
  --bg:#0f1013;--surface:#17191e;--surface2:#1e2026;--surface3:#252830;
  --border:rgba(255,255,255,.12);--border2:rgba(255,255,255,.22);--text:#ffffff;--text2:#e5e7eb;--text3:#cbd5e1;
  --accent:#4f7ef7;--accent-bg:rgba(79,126,247,.15);--accent-h:#3d6ae5;
  --red:#f87171;--shadow:0 1px 3px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.3);
  --canvas-bg:#25272c;--topbar:#17191e;
}
body{background:var(--bg);color:var(--text);transition:background .2s,color .2s}
.app{display:grid;grid-template-rows:50px 1fr;height:100vh}

/* TOPBAR */
.topbar{display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--topbar);border-bottom:1px solid var(--border);box-shadow:var(--shadow);z-index:100;position:relative}
.logo{display:flex;align-items:center;gap:7px;font-weight:700;font-size:14px;margin-right:4px;flex-shrink:0}
.logo-mark{width:26px;height:26px;background:var(--accent);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:800}
.sep{width:1px;height:18px;background:var(--border2);margin:0 2px;flex-shrink:0}
.tbtn{height:28px;padding:0 9px;background:transparent;border:none;border-radius:6px;color:var(--text2);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:4px;transition:background .13s,color .13s;white-space:nowrap;flex-shrink:0}
.tbtn:hover{background:var(--surface2);color:var(--text)}
.tbtn.primary{background:var(--accent);color:#fff;font-weight:600}
.tbtn.primary:hover{background:var(--accent-h)}
.tbtn.preview-btn{background:#059669;color:#fff;font-weight:600}
.tbtn.preview-btn:hover{background:#047857}
.tbtn.danger{color:var(--red)}
.tbtn.danger:hover{background:#fef2f2;color:var(--red)}
[data-theme="dark"] .tbtn.danger:hover{background:rgba(239,68,68,.12)}
.tbtn svg{width:12px;height:12px;flex-shrink:0}
.file-chip{padding:2px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;font-size:11px;color:var(--text2);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'DM Mono',monospace}
.spacer{flex:1}
.icon-btn{width:28px;height:28px;border:none;background:var(--surface2);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .13s;color:var(--text2);flex-shrink:0}
.icon-btn:hover{background:var(--surface3);color:var(--text)}

/* BODY */
.body{display:flex;overflow:hidden}
.body .pl{
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  flex-shrink:0;position:relative;
  width:250px;min-width:0;
}
.body .pl.collapsed{width:0!important;border-right:none}
.body .ca{flex:1;min-width:0}
.body .pr{
  background:var(--surface);border-left:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;
  flex-shrink:0;position:relative;
  width:170px;min-width:0;
}
.body .pr.collapsed{width:0!important;border-left:none;overflow:hidden}

/* PANEL TOGGLE - fixed position, JS updates left/right coords */
.panel-toggle-left,.panel-toggle-right{
  position:fixed;top:calc(50vh + 25px);
  width:16px;height:48px;
  background:var(--surface);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--text3);cursor:pointer;
  z-index:200;user-select:none;
  transition:background .13s,color .13s;
}
.panel-toggle-left{border-left:none;border-radius:0 5px 5px 0}
.panel-toggle-right{border-right:none;border-radius:5px 0 0 5px}
.panel-toggle-left:hover,.panel-toggle-right:hover{
  background:var(--accent-bg);color:var(--accent);border-color:var(--accent);
}

/* RESIZE HANDLE */
.resize-handle{
  position:absolute;top:0;width:4px;height:100%;cursor:col-resize;z-index:12;
  background:transparent;
}
.resize-handle::after{
  content:'';position:absolute;top:0;bottom:0;width:3px;
  background:transparent;transition:background .15s;
}
.resize-handle-left{right:-2px;}
.resize-handle-left::after{left:1px;}
.resize-handle-right{left:-2px;}
.resize-handle-right::after{right:1px;}
.resize-handle:hover::after,.resize-handle.dragging::after{background:var(--accent);opacity:.5}

/* LEFT PANEL */
.pl-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.pl-tab{flex:1;height:34px;border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;color:var(--text3);transition:color .13s,border-bottom .13s;border-bottom:2px solid transparent}
.pl-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.pl-pane{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px;scrollbar-gutter:stable}
.pl-pane.hidden{display:none}

/* TOOLS */
.sec-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:2px 4px 4px;margin-top:6px}
.tbtn2{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;background:transparent;border:none;border-radius:7px;color:var(--text2);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background .13s,color .13s;text-align:left}
.tbtn2:hover{background:var(--surface2);color:var(--text)}
.tbtn2.active{background:var(--accent-bg);color:var(--accent)}
.ticon{width:26px;height:26px;border-radius:6px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:background .13s}
.tbtn2.active .ticon{background:rgba(37,99,235,.15)}

/* PAGES PANEL */
.pages-list{display:flex;flex-direction:column;gap:9px}
.page-card{background:transparent;border:1.5px solid transparent;border-radius:12px;padding:12px;cursor:pointer;transition:border-color .13s,box-shadow .13s,transform .12s,opacity .12s,background .13s;position:relative;user-select:none;overflow:hidden}
.page-card:hover{background:rgba(148,163,184,.08);border-color:var(--border);box-shadow:none}
.page-card.active{border:2.5px solid var(--accent);background:rgba(37,99,235,.10);box-shadow:0 0 0 3px rgba(37,99,235,.18),0 8px 22px rgba(37,99,235,.12)}
.page-card.active .page-thumb-wrap{background:rgba(239,246,255,.55);border-color:rgba(37,99,235,.22)}
.page-card.active .page-paper-frame{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,.35),0 6px 18px rgba(37,99,235,.20)}
.page-thumb-wrap{width:100%;height:230px;background:transparent;border-radius:10px;overflow:hidden;margin-bottom:10px;display:flex;justify-content:center;align-items:center;position:relative;border:1px solid transparent;padding:12px}
.page-thumb-wrap::before{content:none}
.page-paper-frame{position:relative;z-index:1;background:#fff;border:1px solid rgba(17,24,39,.30);box-shadow:0 3px 10px rgba(15,23,42,.10);display:flex;align-items:center;justify-content:center;overflow:hidden;transform-origin:center center;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.page-paper-frame.portrait{width:126px;height:178px;border-radius:5px}
.page-paper-frame.landscape{width:178px;height:126px;border-radius:5px}
.page-card:hover .page-paper-frame{box-shadow:0 5px 14px rgba(15,23,42,.14);border-color:rgba(17,24,39,.42)}
.page-thumb-wrap canvas,.page-thumb-wrap img{display:block;border-radius:3px;max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain}
.page-card-footer{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px}
.page-num{font-size:14px;font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;color:var(--text2);flex-shrink:0;font-weight:500;white-space:nowrap;text-align:center}
.page-actions{position:absolute;left:50%;right:auto;bottom:10px;display:flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;margin:0;padding:5px;background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:10px;box-shadow:0 5px 16px rgba(15,23,42,.14);opacity:0;transform:translate(-50%,6px);pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:20;max-width:calc(100% - 18px)}
.page-card:hover .page-actions,.page-card.action-open .page-actions{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pact-btn{width:28px;height:28px;border:1px solid var(--border);background:var(--surface);border-radius:7px;cursor:pointer;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s,transform .08s;padding:0}
.pact-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pact-btn:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.pact-btn:active{transform:scale(.96)}
.pact-btn.del{color:var(--red)}
.pact-btn.del:hover{background:#fef2f2;color:var(--red);border-color:var(--red)}
[data-theme="dark"] .pact-btn.del:hover{background:rgba(239,68,68,.14)}
.page-menu-btn{position:absolute;top:10px;right:10px;width:30px;height:30px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.96);color:var(--text2);font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,color .12s,border-color .12s,box-shadow .12s;padding:0;box-shadow:0 3px 10px rgba(15,23,42,.10);z-index:8}
.page-menu-btn:hover,.page-card.menu-open .page-menu-btn{background:var(--accent-bg);color:var(--accent);border-color:var(--accent);box-shadow:0 5px 14px rgba(37,99,235,.16)}
.page-menu{position:fixed;z-index:1200;min-width:250px;background:var(--surface);border:1px solid var(--border2);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,.18);padding:8px;display:none}
.page-menu.open{display:block}
.page-menu-item{width:100%;height:36px;border:none;background:transparent;border-radius:8px;color:var(--text);font-family:inherit;font-size:13px;display:flex;align-items:center;gap:10px;padding:0 10px;cursor:pointer;text-align:left}
.page-menu-item:hover{background:var(--surface2)}
.page-menu-item.danger{color:var(--red)}
.page-menu-ico{width:20px;display:flex;align-items:center;justify-content:center;color:inherit}
.page-menu-ico svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.page-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1.5px dashed var(--border2);border-radius:8px;background:transparent;color:var(--text3);font-family:inherit;font-size:12px;cursor:pointer;transition:border-color .13s,color .13s;margin-top:4px}
.page-add-btn:hover{border-color:var(--accent);color:var(--accent)}

/* CANVAS */
.ca{background:var(--canvas-bg);display:flex;flex-direction:column;overflow:hidden;position:relative;flex:1;min-width:0}
.cbar{display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.cbar-btn{height:24px;padding:0 8px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--text2);font-family:inherit;font-size:11px;cursor:pointer;transition:all .13s;display:flex;align-items:center;gap:3px;white-space:nowrap}
.cbar-btn:hover{background:var(--surface3);color:var(--text);border-color:var(--border2)}
.zoom-lbl{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);min-width:36px;text-align:center}
.page-ctr{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);margin-left:auto;padding:3px 6px;border-radius:5px;cursor:pointer;user-select:none}
.page-ctr:hover{background:var(--surface2);color:var(--accent)}
.page-jump-input{width:54px;height:24px;padding:0 6px;background:var(--surface);border:1px solid var(--accent);border-radius:5px;color:var(--text);font-family:'DM Mono',monospace;font-size:11px;text-align:center;outline:none;margin-left:auto}
.cs{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:24px 20px;gap:16px;outline:none}
.cs:focus{outline:none}

/* DROP */
.drop-zone{flex:1;display:flex;align-items:center;justify-content:center}
.drop-box{width:280px;padding:36px 24px;border:2px dashed var(--border2);border-radius:16px;background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;transition:border-color .2s,background .2s}
.drop-zone.dragover .drop-box{border-color:var(--accent);background:var(--accent-bg)}
.drop-btn{padding:8px 20px;background:var(--accent);color:#fff;border:none;border-radius:7px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .13s}
.drop-btn:hover{background:var(--accent-h)}

/* PAGE WRAPPER */
.pw{position:relative;flex-shrink:0;box-shadow:0 4px 20px rgba(0,0,0,.15);border-radius:3px}
.pw canvas{display:block;border-radius:3px}
.ov-cv{position:absolute;top:0;left:0;border-radius:3px;pointer-events:none}
.int-cv{position:absolute;top:0;left:0;border-radius:3px}

/* INLINE TEXT EDITOR */
.inline-editor{
  position:absolute;border:2px solid var(--accent);border-radius:3px;outline:none;
  background:transparent;resize:none;font-family:inherit;line-height:1.4;
  min-width:60px;min-height:24px;padding:2px 4px;z-index:50;
  overflow:hidden;white-space:pre-wrap;word-break:break-word;
  box-shadow:0 0 0 3px rgba(37,99,235,.2);
}

/* RIGHT PANEL */
.ph{padding:10px 12px 8px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--border);flex-shrink:0}
.ps{padding:10px 12px;border-bottom:1px solid var(--border)}
.pl2{font-size:11px;color:var(--text2);margin-bottom:7px;font-weight:500}
.color-grid{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.sw{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s,border-color .12s;flex-shrink:0}
.sw:hover{transform:scale(1.15)}
.sw.active{border-color:var(--accent)}
.prow{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.pin{flex:1;height:26px;padding:0 7px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:'DM Mono',monospace;font-size:11px;outline:none;transition:border .13s}
.pin:focus{border-color:var(--accent)}
.psel{flex:1;height:26px;min-width:72px;padding:0 7px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:inherit;font-size:11px;outline:none;cursor:pointer;appearance:auto}
.szrow{display:flex;gap:4px}
.szbtn{flex:1;height:24px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--text2);font-family:'DM Mono',monospace;font-size:10px;cursor:pointer;transition:all .13s}
.szbtn:hover,.szbtn.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.slider-wrap{display:flex;align-items:center;gap:8px}
.slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--surface3);border-radius:2px;outline:none;cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.slider-val{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);min-width:30px;text-align:right}
.value-input{display:none;width:56px;height:24px;padding:0 5px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:'DM Mono',monospace;font-size:10px;outline:none;text-align:right}
.editable-val{
  cursor:pointer;padding:2px 6px;border-radius:4px;
  border:1px solid transparent;
  font-family:'DM Mono',monospace;font-size:11px;
  transition:border-color .13s,background .13s,color .13s;
  display:inline-flex;align-items:center;gap:3px;
  min-width:36px;justify-content:center;
}
.editable-val::after{content:'✎';font-size:9px;opacity:0;transition:opacity .13s;margin-left:2px;}
.editable-val:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent);}
.editable-val:hover::after{opacity:0.6;}
.inline-value-input{width:58px;height:20px;padding:0 4px;background:var(--surface);border:1px solid var(--accent);border-radius:4px;color:var(--text);font-family:'DM Mono',monospace;font-size:10px;text-align:right;outline:none}
.page-card.dragging{opacity:.45}
.pages-list.drag-autoscroll{scroll-behavior:auto}
.page-card.drop-before{border-top:3px solid var(--accent)}
.page-card.drop-after{border-bottom:3px solid var(--accent)}
.value-input:focus{border-color:var(--accent);background:var(--surface)}
.style-row{display:flex;gap:4px}
.style-btn{flex:1;height:26px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;cursor:pointer;color:var(--text2);font-family:inherit;font-size:12px;transition:all .13s;display:flex;align-items:center;justify-content:center}
.style-btn:hover,.style-btn.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.toggle-row{display:flex;align-items:center;justify-content:space-between}
.tog-lbl{font-size:12px;color:var(--text2)}
.tog{position:relative;width:32px;height:16px;cursor:pointer}
.tog input{display:none}
.tog-track{position:absolute;inset:0;border-radius:8px;background:var(--surface3);border:1px solid var(--border);transition:background .15s}
.tog input:checked+.tog-track{background:var(--accent)}
.tog-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;background:#fff;border-radius:50%;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tog input:checked~.tog-thumb{left:18px}
.font-preview{font-size:13px;padding:2px 0;margin-top:3px}
.border-none-btn{width:100%;height:24px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--text2);font-family:inherit;font-size:11px;cursor:pointer;transition:all .13s;margin-top:4px}
.border-none-btn:hover,.border-none-btn.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.line-style-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
.line-style-btn{height:30px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .13s;padding:0 6px}
.line-style-btn:hover,.line-style-btn.active{background:var(--accent-bg);border-color:var(--accent)}
.line-style-btn svg{width:100%;height:18px}
.line-style-btn path{stroke:var(--text2);stroke-width:2.2;fill:none;stroke-linecap:round}
.line-style-btn.active path,.line-style-btn:hover path{stroke:var(--accent)}


/* LAYERS PANEL */
.layer-panel{border-bottom:1px solid var(--border);padding:10px 12px;background:var(--surface)}
.layer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.layer-title{font-size:11px;font-weight:700;color:var(--text2)}
.layer-actions{display:flex;gap:5px}
.layer-mini{width:28px;height:28px;border:1px solid var(--border);background:var(--surface2);border-radius:7px;color:var(--text2);font-size:0;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.layer-mini svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.layer-mini:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.layer-mini.danger{color:var(--red)}
.layer-mini.danger:hover{background:#fef2f2;color:var(--red);border-color:var(--red)}
.layer-list{display:flex;flex-direction:column;gap:5px;max-height:180px;overflow:auto}
.layer-item{display:grid;grid-template-columns:22px 1fr 28px 28px;align-items:center;gap:5px;padding:6px 7px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);cursor:pointer;font-size:11px;color:var(--text2)}
.layer-item.dragging{opacity:.45;border-color:var(--accent)}
.layer-item.drop-target{outline:2px solid var(--accent);outline-offset:1px}
.layer-item:hover{border-color:var(--border2);color:var(--text)}
.layer-item.active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-ico,.layer-btn{border:none;background:transparent;color:inherit;font-size:12px;cursor:pointer;text-align:center}
.layer-del{color:var(--red)!important;font-size:0;padding:4px;border-radius:5px;display:flex;align-items:center;justify-content:center}.layer-del svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.layer-del:hover{background:rgba(239,68,68,.12)}
.layer-drag{cursor:grab;font-size:14px;color:var(--text3);user-select:none}.layer-drag:active{cursor:grabbing}
.layer-empty{font-size:11px;color:var(--text3);padding:8px;text-align:center;border:1px dashed var(--border);border-radius:7px}

/* CUSTOM COLOR PICKER POPUP */
.color-picker-popup{
  position:fixed;z-index:1000;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:12px;padding:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  display:none;flex-direction:column;gap:8px;
  width:200px;
}
.color-picker-popup.open{display:flex}
.cpp-spectrum{
  width:100%;height:120px;border-radius:7px;
  position:relative;cursor:crosshair;overflow:hidden;
}
.cpp-hue{
  width:100%;height:12px;border-radius:6px;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  cursor:pointer;border:none;outline:none;-webkit-appearance:none;appearance:none;
}
.cpp-hue::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.3);cursor:pointer;
}
.cpp-preview-row{display:flex;align-items:center;gap:8px}
.cpp-preview{width:28px;height:28px;border-radius:50%;border:2px solid var(--border2);flex-shrink:0}
.cpp-hex{
  flex:1;height:26px;padding:0 7px;background:var(--surface2);
  border:1px solid var(--border);border-radius:5px;color:var(--text);
  font-family:'DM Mono',monospace;font-size:11px;outline:none;
}
.cpp-hex:focus{border-color:var(--accent)}
.cpp-apply{
  height:28px;background:var(--accent);color:#fff;border:none;
  border-radius:6px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
}
.cpp-apply:hover{background:var(--accent-h)}
.cpp-close{
  position:absolute;top:8px;right:8px;width:18px;height:18px;
  background:var(--surface3);border:none;border-radius:4px;cursor:pointer;
  font-size:11px;color:var(--text2);display:flex;align-items:center;justify-content:center;
}

/* Rainbow swatch → clean plus button */
.sw.rainbow{
  background:var(--surface2);
  border:1.5px dashed var(--border2)!important;
  position:relative;display:flex;align-items:center;justify-content:center;
}
.sw.rainbow::after{
  content:'+';font-size:14px;font-weight:600;color:var(--text3);line-height:1;
}
.sw.rainbow:hover{border-color:var(--accent)!important;background:var(--accent-bg)}
.sw.rainbow:hover::after{color:var(--accent)}
.sw.rainbow.active{border-color:var(--accent)!important;background:var(--accent-bg)}
.sw.rainbow.active::after{color:var(--accent)}

.merge-modal,.split-modal{}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:500}
.modal-bg.open{display:flex}
.modal-box{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.modal-title{font-size:15px;font-weight:700;margin-bottom:14px;color:var(--text)}
.modal-body{margin-bottom:14px}
.mdbtn{height:30px;padding:0 14px;white-space:nowrap;min-width:58px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text2);font-family:inherit;font-size:12px;cursor:pointer;transition:all .13s}
.mdbtn:hover{background:var(--surface2);color:var(--text)}
.mdbtn.ok{background:var(--accent);color:#fff;border-color:transparent}
.mdbtn.ok:hover{background:var(--accent-h)}
.modal-actions{display:flex;gap:7px;justify-content:flex-end}

/* SIG */
.sig-canvas{width:100%;height:160px;background:#fff;border-radius:8px;border:1px solid var(--border);cursor:crosshair;touch-action:none;display:block}


/* SAVED SIGNATURES */
.saved-sig-grid{display:grid;grid-template-columns:1fr;gap:8px;max-height:360px;overflow:auto;margin-top:8px}
.saved-sig-item{display:grid;grid-template-columns:1fr 58px;gap:8px;align-items:center;padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--surface2)}
.saved-sig-preview{height:72px;background:#fff;border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.saved-sig-preview img{max-width:100%;max-height:100%;display:block}
.saved-sig-actions{display:flex;flex-direction:column;gap:6px}
.saved-sig-empty{padding:18px;border:1px dashed var(--border2);border-radius:8px;text-align:center;font-size:12px;color:var(--text3);background:var(--surface2)}

/* TEXT MODAL */
.txt-modal{width:320px}
.txt-ta{width:100%;height:80px;resize:none;background:var(--surface2);border:1px solid var(--border);border-radius:7px;color:var(--text);font-family:inherit;font-size:13px;padding:8px;outline:none;margin-bottom:8px}
.txt-ta:focus{border-color:var(--accent)}

/* SPLIT MODAL */
.split-input{width:100%;height:30px;padding:0 9px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:'DM Mono',monospace;font-size:12px;outline:none}
.split-input:focus{border-color:var(--accent)}

/* TOAST */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--text);color:var(--surface);border-radius:7px;padding:8px 16px;font-size:12px;font-weight:500;opacity:0;transition:all .25s;pointer-events:none;z-index:999;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}

/* ═══ RESPONSIVE LAYOUT PATCH v17 ═══ */
@media (max-width: 1100px){
  .body .pl{width:220px;}
  .body .pr{width:165px;}
  .topbar{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
  .topbar .spacer{min-width:8px;}
  .page-thumb-wrap{height:200px;padding:8px;}
  .page-paper-frame.portrait{width:112px;height:158px;}
  .page-paper-frame.landscape{width:158px;height:112px;}
}
@media (max-width: 760px){
  .app{grid-template-rows:50px 1fr;}
  .topbar{gap:5px;padding:0 8px;white-space:nowrap;}
  .logo{font-size:13px;}.logo-mark{width:24px;height:24px;}
  .tbtn{height:30px;padding:0 8px;font-size:12px;}.file-chip{max-width:96px;}
  .body{position:relative;}
  .body .pl,.body .pr{position:absolute;top:0;bottom:0;z-index:260;box-shadow:0 10px 28px rgba(15,23,42,.18);transition:transform .18s ease,width .18s ease;}
  .body .pl{left:0;width:min(84vw,300px);}
  .body .pr{right:0;width:min(84vw,300px);}
  .body .pl.collapsed{width:min(84vw,300px)!important;transform:translateX(-102%);border-right:1px solid var(--border);}
  .body .pr.collapsed{width:min(84vw,300px)!important;transform:translateX(102%);border-left:1px solid var(--border);overflow-y:auto;}
  .body .ca{width:100%;}
  .panel-toggle-left,.panel-toggle-right{top:calc(50vh + 10px);width:22px;height:54px;z-index:330;}
  .panel-toggle-left{left:0!important;}.panel-toggle-right{right:0!important;}
  .body .pl:not(.collapsed) ~ .ca .panel-toggle-left{left:min(84vw,300px)!important;}
  .body .pr:not(.collapsed) ~ .panel-toggle-right{right:min(84vw,300px)!important;}
  .cbar{padding:6px 8px;gap:5px;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;}
  .cbar-btn{height:28px;font-size:12px;}.zoom-lbl,.page-ctr{font-size:12px;}
  .cs{padding:16px 10px;gap:12px;align-items:center;}.pw{max-width:calc(100vw - 20px);}.pw canvas{max-width:100%;height:auto;}
  .pl-pane{padding:8px;}.page-card{padding:10px;border-radius:12px;}.page-thumb-wrap{height:210px;padding:8px;}
  .page-paper-frame.portrait{width:118px;height:166px;}.page-paper-frame.landscape{width:166px;height:118px;}
  .page-actions{opacity:1;transform:translate(-50%,0);pointer-events:auto;bottom:9px;}
  .pact-btn{width:31px;height:31px;}.page-menu-btn{width:34px;height:34px;}
  .layer-list{max-height:130px;}.ps{padding:10px 12px;}.sig-canvas{height:140px;}.modal-box{max-width:calc(100vw - 24px)!important;}
}
@media (max-width: 480px){
  .tbtn{font-size:11px;padding:0 7px;}.file-chip{max-width:72px;}
  .page-thumb-wrap{height:190px;}.page-paper-frame.portrait{width:104px;height:148px;}.page-paper-frame.landscape{width:148px;height:104px;}
  .pact-btn{width:29px;height:29px;}.page-actions{gap:4px;padding:4px;}.drop-box{width:calc(100vw - 48px);padding:30px 18px;}
}
.int-cv,.ov-cv,.pw{touch-action:none;} body.is-mobile-editor .resize-handle{display:none;}


/* === v19 MOBILE/TABLET BOTTOM-SHEET RESPONSIVE LAYOUT === */
.mobile-bottom-nav{display:none}
.mobile-sheet-backdrop{display:none}
.mobile-sheet-title{display:none}

@media (max-width: 768px){
  html,body{width:100%;height:100%;overflow:hidden;}
  .app{height:100dvh;grid-template-rows:52px 1fr;}
  .topbar{
    height:52px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;
    scrollbar-width:none;padding:0 8px;gap:5px;
  }
  .topbar::-webkit-scrollbar{display:none}
  .logo{font-size:13px;margin-right:2px}.logo-mark{width:26px;height:26px}
  .tbtn{height:30px;padding:0 8px;font-size:12px}.file-chip{max-width:86px}
  .body{position:relative;height:calc(100dvh - 52px);overflow:hidden;}
  .ca{width:100%!important;min-width:0;}
  .cbar{height:auto;min-height:44px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;flex-wrap:nowrap;padding:6px 8px;scrollbar-width:none;}
  .cbar::-webkit-scrollbar{display:none}
  .cbar-btn{height:30px;padding:0 10px;font-size:12px;flex-shrink:0}.zoom-lbl{flex-shrink:0}.page-ctr{margin-left:8px;flex-shrink:0}
  .cs{padding:14px 10px 72px;align-items:center;gap:14px;}
  .drop-zone{padding:16px 12px 72px}.drop-box{width:min(92vw,360px);padding:28px 20px}
  .pw{max-width:calc(100vw - 24px);}
  .pw canvas{max-width:calc(100vw - 24px);height:auto!important;}

  /* 좌우 패널을 모바일에서는 아래 바텀시트로 변경 */
  .body .pl,
  .body .pr,
  .body .pl.collapsed,
  .body .pr.collapsed{
    position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;min-width:0!important;height:min(64dvh,560px)!important;
    transform:translateY(110%);transition:transform .22s ease;
    z-index:2100;background:var(--surface);border:none!important;border-top:1px solid var(--border)!important;
    border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.22);overflow:hidden;
  }
  body.mobile-sheet-tools .body .pl,
  body.mobile-sheet-pages .body .pl,
  body.mobile-sheet-props .body .pr{transform:translateY(0);}
  body.mobile-sheet-tools #pane-tools{display:block}
  body.mobile-sheet-tools #pane-pages{display:none!important}
  body.mobile-sheet-pages #pane-tools{display:none!important}
  body.mobile-sheet-pages #pane-pages{display:block!important}
  body.mobile-sheet-props .body .pr{overflow-y:auto;}

  .pl-tabs{height:42px;align-items:center;padding:0 12px;position:relative;}
  .pl-tab{height:42px;font-size:13px}.pl-pane{padding:12px 14px 78px;}
  .pr{padding-bottom:72px}.ph{font-size:12px;padding:14px 16px 10px}.ps,.layer-panel{padding:12px 16px}
  .layer-list{max-height:160px}.page-card{padding:12px;margin:0 4px}.page-thumb-wrap{height:210px}

  .mobile-sheet-title{
    display:flex;align-items:center;justify-content:center;height:26px;
    color:var(--text3);font-size:11px;border-bottom:1px solid var(--border);position:relative;
  }
  .mobile-sheet-title::before{content:'';width:44px;height:4px;border-radius:99px;background:var(--border2);position:absolute;top:8px;left:50%;transform:translateX(-50%);}

  .mobile-bottom-nav{
    position:fixed;left:10px;right:10px;bottom:10px;height:54px;display:grid;
    grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;background:rgba(255,255,255,.96);
    border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 28px rgba(15,23,42,.20);
    z-index:2200;backdrop-filter:blur(10px);
  }
  [data-theme="dark"] .mobile-bottom-nav{background:rgba(23,25,30,.96)}
  .mobile-nav-btn{
    border:none;border-radius:12px;background:transparent;color:var(--text2);font-family:inherit;font-size:11px;font-weight:700;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;
  }
  .mobile-nav-btn span{font-size:17px;line-height:1}
  .mobile-nav-btn.active{background:var(--accent-bg);color:var(--accent)}
  .mobile-nav-btn.save{background:var(--accent);color:#fff}
  .mobile-sheet-backdrop{
    position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:2050;display:none;
  }
  body.mobile-sheet-tools .mobile-sheet-backdrop,
  body.mobile-sheet-pages .mobile-sheet-backdrop,
  body.mobile-sheet-props .mobile-sheet-backdrop{display:block;}

  .panel-toggle-left,.panel-toggle-right{display:none!important}
  .resize-handle{display:none!important}
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  .body .pl{width:210px}.body .pr{width:180px}.page-thumb-wrap{height:190px}.tbtn{padding:0 7px}
}

/* ═══ RESPONSIVE PANEL TOGGLE FIX v18 ═══ */
@media (max-width: 760px){
  .body .pl,.body .pr{height:100%;}
  .body .pl.collapsed{transform:translateX(-104%)!important;}
  .body .pr.collapsed{transform:translateX(104%)!important;}
  .panel-toggle-left,.panel-toggle-right{
    position:fixed!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:26px!important;
    height:62px!important;
    z-index:500!important;
    box-shadow:0 4px 14px rgba(15,23,42,.18);
    background:var(--surface)!important;
  }
  .panel-toggle-left{left:0!important;right:auto!important;border-radius:0 8px 8px 0!important;}
  .panel-toggle-right{right:0!important;left:auto!important;border-radius:8px 0 0 8px!important;}
  body.mobile-left-open .panel-toggle-left{left:min(84vw,300px)!important;}
  body.mobile-right-open .panel-toggle-right{right:min(84vw,300px)!important;}
  body.mobile-left-open .body .ca::before,
  body.mobile-right-open .body .ca::before{
    content:'';position:absolute;inset:0;background:rgba(15,23,42,.12);z-index:240;pointer-events:none;
  }
}


/* === v19 MOBILE/TABLET BOTTOM-SHEET RESPONSIVE LAYOUT === */
.mobile-bottom-nav{display:none}
.mobile-sheet-backdrop{display:none}
.mobile-sheet-title{display:none}

@media (max-width: 768px){
  html,body{width:100%;height:100%;overflow:hidden;}
  .app{height:100dvh;grid-template-rows:52px 1fr;}
  .topbar{
    height:52px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;
    scrollbar-width:none;padding:0 8px;gap:5px;
  }
  .topbar::-webkit-scrollbar{display:none}
  .logo{font-size:13px;margin-right:2px}.logo-mark{width:26px;height:26px}
  .tbtn{height:30px;padding:0 8px;font-size:12px}.file-chip{max-width:86px}
  .body{position:relative;height:calc(100dvh - 52px);overflow:hidden;}
  .ca{width:100%!important;min-width:0;}
  .cbar{height:auto;min-height:44px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;flex-wrap:nowrap;padding:6px 8px;scrollbar-width:none;}
  .cbar::-webkit-scrollbar{display:none}
  .cbar-btn{height:30px;padding:0 10px;font-size:12px;flex-shrink:0}.zoom-lbl{flex-shrink:0}.page-ctr{margin-left:8px;flex-shrink:0}
  .cs{padding:14px 10px 72px;align-items:center;gap:14px;}
  .drop-zone{padding:16px 12px 72px}.drop-box{width:min(92vw,360px);padding:28px 20px}
  .pw{max-width:calc(100vw - 24px);}
  .pw canvas{max-width:calc(100vw - 24px);height:auto!important;}

  /* 좌우 패널을 모바일에서는 아래 바텀시트로 변경 */
  .body .pl,
  .body .pr,
  .body .pl.collapsed,
  .body .pr.collapsed{
    position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;min-width:0!important;height:min(64dvh,560px)!important;
    transform:translateY(110%);transition:transform .22s ease;
    z-index:2100;background:var(--surface);border:none!important;border-top:1px solid var(--border)!important;
    border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.22);overflow:hidden;
  }
  body.mobile-sheet-tools .body .pl,
  body.mobile-sheet-pages .body .pl,
  body.mobile-sheet-props .body .pr{transform:translateY(0);}
  body.mobile-sheet-tools #pane-tools{display:block}
  body.mobile-sheet-tools #pane-pages{display:none!important}
  body.mobile-sheet-pages #pane-tools{display:none!important}
  body.mobile-sheet-pages #pane-pages{display:block!important}
  body.mobile-sheet-props .body .pr{overflow-y:auto;}

  .pl-tabs{height:42px;align-items:center;padding:0 12px;position:relative;}
  .pl-tab{height:42px;font-size:13px}.pl-pane{padding:12px 14px 78px;}
  .pr{padding-bottom:72px}.ph{font-size:12px;padding:14px 16px 10px}.ps,.layer-panel{padding:12px 16px}
  .layer-list{max-height:160px}.page-card{padding:12px;margin:0 4px}.page-thumb-wrap{height:210px}

  .mobile-sheet-title{
    display:flex;align-items:center;justify-content:center;height:26px;
    color:var(--text3);font-size:11px;border-bottom:1px solid var(--border);position:relative;
  }
  .mobile-sheet-title::before{content:'';width:44px;height:4px;border-radius:99px;background:var(--border2);position:absolute;top:8px;left:50%;transform:translateX(-50%);}

  .mobile-bottom-nav{
    position:fixed;left:10px;right:10px;bottom:10px;height:54px;display:grid;
    grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;background:rgba(255,255,255,.96);
    border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 28px rgba(15,23,42,.20);
    z-index:2200;backdrop-filter:blur(10px);
  }
  [data-theme="dark"] .mobile-bottom-nav{background:rgba(23,25,30,.96)}
  .mobile-nav-btn{
    border:none;border-radius:12px;background:transparent;color:var(--text2);font-family:inherit;font-size:11px;font-weight:700;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;
  }
  .mobile-nav-btn span{font-size:17px;line-height:1}
  .mobile-nav-btn.active{background:var(--accent-bg);color:var(--accent)}
  .mobile-nav-btn.save{background:var(--accent);color:#fff}
  .mobile-sheet-backdrop{
    position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:2050;display:none;
  }
  body.mobile-sheet-tools .mobile-sheet-backdrop,
  body.mobile-sheet-pages .mobile-sheet-backdrop,
  body.mobile-sheet-props .mobile-sheet-backdrop{display:block;}

  .panel-toggle-left,.panel-toggle-right{display:none!important}
  .resize-handle{display:none!important}
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  .body .pl{width:210px}.body .pr{width:180px}.page-thumb-wrap{height:190px}.tbtn{padding:0 7px}
}

/* v20 핵심: 모바일에서 canvas만 CSS로 줄이면 .pw 높이가 원래대로 남아서 페이지 사이가 크게 벌어집니다.
   그래서 CSS 축소를 막고, JS에서 st.zoom 자체를 화면폭에 맞춥니다. */
@media (max-width: 768px), (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  html, body{width:100%;height:100%;overflow:hidden;}
  .app{height:100dvh;grid-template-rows:52px 1fr;}
  .body{position:relative;height:calc(100dvh - 52px);overflow:hidden;}
  .ca{width:100%!important;min-width:0!important;}

  /* 상단바 정리: 모바일/태블릿 세로에서는 핵심만 남깁니다. */
  .topbar{height:52px;padding:0 8px;gap:5px;overflow-x:hidden;white-space:nowrap;}
  .topbar .sep{display:none;}
  .topbar .spacer{display:block;min-width:4px;}
  .logo{font-size:13px;margin-right:4px;}
  .logo-mark{width:26px;height:26px;}
  .file-chip{max-width:82px;}
  .topbar .tbtn{height:30px;padding:0 8px;font-size:12px;}
  .topbar .tbtn[onclick="undoLast()"],
  .topbar .tbtn[onclick="redoLast()"],
  .topbar .tbtn[onclick="deleteSelected()"],
  .topbar .tbtn[onclick="groupSelected()"],
  .topbar .tbtn[onclick="ungroupSelected()"],
  .topbar .tbtn[onclick="openMergeModal()"],
  .topbar .tbtn[onclick="openSplitModal()"],
  .topbar .preview-btn,
  .topbar .tbtn.primary{display:none!important;}

  .cbar{min-height:44px;padding:6px 8px;gap:5px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;flex-wrap:nowrap;scrollbar-width:none;}
  .cbar::-webkit-scrollbar{display:none;}
  .cbar-btn{height:30px;padding:0 10px;font-size:12px;flex-shrink:0;}
  .zoom-lbl{flex-shrink:0;}
  .page-ctr{margin-left:8px;flex-shrink:0;}
  .cbar span[style*="Ctrl"], .desktop-wheel-help{display:none!important;}

  .cs{padding:14px 10px 76px!important;gap:12px!important;align-items:center;}
  .drop-zone{padding:16px 12px 76px;}
  .drop-box{width:min(92vw,360px);padding:28px 20px;}

  /* 페이지 간격 버그 방지: canvas를 CSS max-width로 줄이지 않습니다. */
  .pw{max-width:none!important;}
  .pw canvas{max-width:none!important;height:auto!important;}
  .ov-cv,.int-cv{max-width:none!important;height:auto!important;}

  /* 좌우 패널은 모바일/태블릿 세로에서 바텀시트로 고정 */
  .body .pl,
  .body .pr,
  .body .pl.collapsed,
  .body .pr.collapsed{
    position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;min-width:0!important;height:min(66dvh,560px)!important;
    transform:translateY(112%)!important;transition:transform .22s ease!important;
    z-index:2100;background:var(--surface);border:none!important;border-top:1px solid var(--border)!important;
    border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.24);overflow:hidden!important;
  }
  body.mobile-sheet-tools .body .pl,
  body.mobile-sheet-pages .body .pl,
  body.mobile-sheet-props .body .pr{transform:translateY(0)!important;}
  body.mobile-sheet-props .body .pr{overflow-y:auto!important;}

  body.mobile-sheet-tools #pane-tools{display:block!important;}
  body.mobile-sheet-tools #pane-pages{display:none!important;}
  body.mobile-sheet-pages #pane-tools{display:none!important;}
  body.mobile-sheet-pages #pane-pages{display:block!important;}

  .pl-tabs{height:42px;align-items:center;padding:0 12px;}
  .pl-tab{height:42px;font-size:13px;}
  .pl-pane{padding:12px 14px 82px;}
  .pr{padding-bottom:82px;}
  .ph{font-size:12px;padding:14px 16px 10px;}
  .ps,.layer-panel{padding:12px 16px;}
  .layer-list{max-height:160px;}
  .page-card{padding:12px;margin:0 4px;}
  .page-thumb-wrap{height:210px;}

  .mobile-bottom-nav{
    position:fixed;left:10px;right:10px;bottom:10px;height:56px;display:grid!important;
    grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;background:rgba(255,255,255,.96);
    border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 28px rgba(15,23,42,.20);
    z-index:2200;backdrop-filter:blur(10px);
  }
  [data-theme="dark"] .mobile-bottom-nav{background:rgba(23,25,30,.96);}
  .mobile-nav-btn{border:none;border-radius:12px;background:transparent;color:var(--text2);font-family:inherit;font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;}
  .mobile-nav-btn span{font-size:17px;line-height:1;}
  .mobile-nav-btn.active{background:var(--accent-bg);color:var(--accent);}
  .mobile-nav-btn.save{background:var(--accent);color:#fff;}
  .mobile-sheet-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:2050;display:none;}
  body.mobile-sheet-tools .mobile-sheet-backdrop,
  body.mobile-sheet-pages .mobile-sheet-backdrop,
  body.mobile-sheet-props .mobile-sheet-backdrop{display:block!important;}

  .panel-toggle-left,.panel-toggle-right,.resize-handle{display:none!important;}
}

/* 태블릿 가로/PC는 기존 양쪽 패널 유지 */
@media (min-width: 1025px), (min-width: 769px) and (orientation: landscape){
  .mobile-bottom-nav,.mobile-sheet-backdrop{display:none!important;}
}

.mobile-more-btn,.mobile-action-popover{display:none;}
@media (max-width: 768px), (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  .mobile-more-btn{display:flex!important;width:32px;height:32px;border:none;border-radius:9px;background:var(--surface2);color:var(--text2);align-items:center;justify-content:center;font-size:18px;font-weight:800;cursor:pointer;flex-shrink:0;}
  .mobile-more-btn:active{transform:scale(.96)}
  .mobile-action-popover{position:fixed;right:10px;top:58px;z-index:2600;display:none;width:min(86vw,320px);background:var(--surface);border:1px solid var(--border2);border-radius:16px;box-shadow:0 16px 44px rgba(15,23,42,.24);padding:8px;}
  .mobile-action-popover.open{display:block;}
  .mobile-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .mobile-action-item{height:42px;border:1px solid var(--border);border-radius:11px;background:var(--surface2);color:var(--text);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:0 10px;}
  .mobile-action-item.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
  .mobile-action-item.preview{background:#059669;color:#fff;border-color:#059669}
  .mobile-action-item.danger{color:var(--red);background:#fff5f5;border-color:#fecaca}
  [data-theme="dark"] .mobile-action-item.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}
  .mobile-action-item.full{grid-column:1 / -1;justify-content:center;}
  .cbar{overflow:hidden!important;gap:4px!important;padding:5px 6px!important;}
  .cbar .sep{display:none!important;}
  .cbar-btn{height:30px!important;padding:0 8px!important;font-size:12px!important;}
  .zoom-lbl{min-width:42px!important;font-size:12px!important;}
  .page-ctr{margin-left:auto!important;min-width:50px;text-align:right;background:var(--accent-bg);color:var(--accent);font-weight:700;}
  .cbar span[style*="Ctrl"], .desktop-wheel-help{display:none!important;}
  .cs{overscroll-behavior:contain;}
  .page-menu.open{max-width:calc(100vw - 32px);}
}
.editable-val{background:var(--surface2)!important;border:1px solid var(--border2)!important;color:var(--accent)!important;padding:2px 7px!important;border-radius:7px!important;min-width:48px!important;box-shadow:inset 0 0 0 1px rgba(37,99,235,.04);}
.editable-val::after{opacity:.65!important;content:'✎'!important;}
.editable-val:hover{background:var(--accent-bg)!important;border-color:var(--accent)!important;}
.slider{cursor:pointer;}
.slider-wrap::after{content:'드래그';font-size:9px;color:var(--text3);margin-left:2px;white-space:nowrap;}
@media (max-width: 768px), (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){.slider-wrap::after{content:'조절';font-size:10px;}.pl2 span + .editable-val{font-weight:700;}}

@media (max-width: 1024px){
  .desktop-wheel-help{display:none!important;}
}

@media (max-width: 768px), (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  .desktop-wheel-help{display:none!important;}
  .cbar span[style*="Ctrl"]{display:none!important;}
  .cs{padding-left:0!important;padding-right:0!important;align-items:center!important;}
  .pw{max-width:none!important;}
  .pw canvas{max-width:none!important;}
  .int-cv{touch-action:none!important;}
}

/* === v25 small mobile polish === */
@media (max-width: 768px), (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  .desktop-wheel-help{display:none!important;}
  .mobile-edit-toggle{min-width:86px;font-size:14px;}
}

@media (max-width: 768px), (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  /* 기본값: PDF 위에서 손가락을 움직이면 편집이 아니라 페이지 스크롤 */
  body:not(.mobile-edit-mode) .int-cv{touch-action:pan-y pinch-zoom!important;}
  body.mobile-edit-mode .int-cv{touch-action:none!important;}
  body:not(.mobile-edit-mode) .pw{touch-action:pan-y pinch-zoom!important;}
  body.mobile-edit-mode .pw{touch-action:none!important;}

  .mobile-edit-toggle{
    position:fixed;right:16px;bottom:82px;z-index:2300;
    min-width:74px;height:46px;padding:0 12px;border:none;border-radius:18px;
    background:rgba(255,255,255,.96);color:var(--text2);
    box-shadow:0 8px 26px rgba(15,23,42,.20);border:1px solid var(--border);
    font-family:inherit;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:0;
    backdrop-filter:blur(10px);cursor:pointer;
  }
  [data-theme="dark"] .mobile-edit-toggle{background:rgba(23,25,30,.96);}
  body.mobile-edit-mode .mobile-edit-toggle{background:var(--accent);color:#fff;border-color:var(--accent);}
  body.mobile-sheet-tools .mobile-edit-toggle,
  body.mobile-sheet-pages .mobile-edit-toggle,
  body.mobile-sheet-props .mobile-edit-toggle{display:none!important;}

  .mobile-edit-hint{
    position:fixed;left:50%;bottom:138px;transform:translateX(-50%) translateY(8px);
    z-index:2400;background:rgba(17,24,39,.90);color:#fff;border-radius:999px;
    padding:8px 12px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;
    transition:opacity .18s,transform .18s;white-space:nowrap;
  }
  .mobile-edit-hint.show{opacity:1;transform:translateX(-50%) translateY(0);}
}
@media (min-width: 1025px), (min-width: 769px) and (orientation: landscape){
  .mobile-edit-toggle,.mobile-edit-hint{display:none!important;}
}

/* 모바일/터치 기기 가로모드도 PC UI가 아니라 모바일 UI를 유지 */
@media (pointer: coarse) and (max-width: 1024px){
  html,body{width:100%;height:100%;overflow:hidden;}
  .app{height:100dvh;grid-template-rows:52px 1fr;}
  .topbar{height:52px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;padding:0 8px;gap:5px;}
  .topbar::-webkit-scrollbar{display:none;}
  .tbtn.mobile-hide,.sep.mobile-hide,.desktop-only-action{display:none!important;}
  .body{position:relative;height:calc(100dvh - 52px);overflow:hidden;}
  .body .ca{width:100%!important;min-width:0;}
  .cbar{min-height:44px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;flex-wrap:nowrap;padding:6px 8px;scrollbar-width:none;}
  .cbar::-webkit-scrollbar{display:none;}
  .cbar-btn{height:30px;padding:0 10px;font-size:12px;flex-shrink:0;}
  #wheelHelp{display:none!important;}
  .cs{padding:14px 10px 72px;align-items:center;gap:14px;}
  .pw{max-width:calc(100vw - 24px);}
  .pw canvas{max-width:calc(100vw - 24px);height:auto!important;}

  .body .pl,.body .pr,.body .pl.collapsed,.body .pr.collapsed{
    position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;min-width:0!important;height:min(64dvh,560px)!important;
    transform:translateY(110%);transition:transform .22s ease;
    z-index:2100;background:var(--surface);border:none!important;border-top:1px solid var(--border)!important;
    border-radius:18px 18px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.22);overflow:hidden;
  }
  body.mobile-sheet-tools .body .pl,body.mobile-sheet-pages .body .pl,body.mobile-sheet-props .body .pr{transform:translateY(0);}
  body.mobile-sheet-tools #pane-tools{display:block!important;}
  body.mobile-sheet-tools #pane-pages{display:none!important;}
  body.mobile-sheet-pages #pane-tools{display:none!important;}
  body.mobile-sheet-pages #pane-pages{display:block!important;}
  body.mobile-sheet-props .body .pr{overflow-y:auto;}
  .pl-tabs{height:42px;align-items:center;padding:0 12px;position:relative;}
  .pl-tab{height:42px;font-size:13px;}
  .pl-pane{padding:12px 14px 78px;}
  .mobile-bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;height:56px;display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 28px rgba(15,23,42,.20);z-index:2200;backdrop-filter:blur(10px);}
  [data-theme="dark"] .mobile-bottom-nav{background:rgba(23,25,30,.96);}
  .mobile-sheet-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:2050;display:none;}
  body.mobile-sheet-tools .mobile-sheet-backdrop,body.mobile-sheet-pages .mobile-sheet-backdrop,body.mobile-sheet-props .mobile-sheet-backdrop{display:block!important;}
  .panel-toggle-left,.panel-toggle-right,.resize-handle{display:none!important;}
  .mobile-edit-toggle{display:flex!important;}
  body.mobile-sheet-tools .mobile-edit-toggle,body.mobile-sheet-pages .mobile-edit-toggle,body.mobile-sheet-props .mobile-edit-toggle{display:none!important;}
}

/* 페이지 메뉴는 모바일/태블릿에서 선택한 썸네일을 밀어내지 않고 가운데 팝업으로 표시 */
@media (pointer: coarse) and (max-width: 1024px), (max-width: 768px){
  .page-card.menu-open{border-color:var(--accent)!important;background:rgba(37,99,235,.08)!important;box-shadow:0 0 0 3px rgba(37,99,235,.15)!important;}
  .page-menu.mobile-centered{position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:min(86vw,360px)!important;max-height:min(70dvh,520px)!important;overflow:auto!important;z-index:2600!important;}
}

@media (pointer: coarse) and (max-width: 1024px), (max-width: 768px){
  .mobile-edit-toggle{min-width:96px!important;font-size:13px!important;}
  .mobile-page-jumpbar{
    position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:flex-end;gap:6px;
    padding:8px 6px 10px;background:linear-gradient(to bottom,var(--surface) 75%,rgba(255,255,255,0));
  }
  .mobile-page-jumpbar button{
    height:30px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);
    color:var(--text2);font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;
  }
  .mobile-page-jumpbar button.primary{background:var(--accent-bg);color:var(--accent);border-color:rgba(37,99,235,.35)}
  .page-menu.mobile-centered{
    position:fixed!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
    transform:translate(-50%,-50%)!important;width:min(86vw,360px)!important;max-height:min(70dvh,520px)!important;
    overflow:auto!important;z-index:2700!important;
  }
  body.mobile-page-menu-open .mobile-sheet-backdrop{display:block!important;z-index:2550!important;}
  body.mobile-page-menu-open .page-card.menu-open{border-color:var(--accent)!important;background:rgba(37,99,235,.08)!important;box-shadow:0 0 0 3px rgba(37,99,235,.15)!important;}
}

/* v29: 사용자가 헷갈리는 '요소 편집' 플로팅 버튼 제거 */
.mobile-edit-toggle{display:none!important;}

/* 선택 안내 토스트만 잠깐 표시 */
.mobile-select-toast{
  position:fixed;
  left:50%;
  bottom:92px;
  transform:translateX(-50%) translateY(8px);
  z-index:2600;
  background:rgba(17,24,39,.90);
  color:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(15,23,42,.20);
}
.mobile-select-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* 모바일/터치기기는 기본 스크롤, 요소를 잡은 순간만 편집 처리 */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px){
  body:not(.mobile-edit-mode) .int-cv,
  body:not(.mobile-edit-mode) .pw{
    touch-action:pan-y pinch-zoom!important;
  }
  body.mobile-edit-mode .int-cv,
  body.mobile-edit-mode .pw{
    touch-action:none!important;
  }
}

/* 페이지 점 3개 메뉴는 바텀시트 위에 고정 팝업처럼 보이도록 보정 */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px){
  .page-menu.open{
    position:fixed!important;
    left:50%!important;
    top:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
    width:min(86vw,360px)!important;
    max-height:min(70dvh,520px)!important;
    overflow:auto!important;
    z-index:2605!important;
    border-radius:16px!important;
    box-shadow:0 18px 48px rgba(15,23,42,.28)!important;
  }
}

.mobile-select-toast{display:none!important;}
@media (pointer: coarse) and (max-width: 1180px), (max-width: 900px){
  .mobile-page-jumpbar{justify-content:flex-end!important;gap:4px!important;padding:6px 10px 8px!important;}
  .mobile-page-jumpbar::before{content:'페이지 이동';margin-right:auto;color:var(--text3);font-size:12px;font-weight:800;}
  .mobile-page-jumpbar button{height:28px!important;padding:0 8px!important;font-size:11px!important;}
}

.mobile-select-toast,
  .mobile-edit-hint{display:none!important;}

/* 선택/모드 안내 토스트는 모바일에서 너무 시끄러워서 완전 제거 */
  #mobileEditHint,
  #mobileSelectToast,
  .mobile-edit-hint,
  .mobile-select-toast{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  @media (max-width: 900px), (pointer: coarse) and (max-width: 1180px){
    /* 속성 시트도 도구/페이지처럼 위 여백을 확보 */
    .body .pr .mobile-sheet-title,
    .body .pl .mobile-sheet-title{
      display:flex!important;
      height:38px!important;
      flex:0 0 38px!important;
      align-items:center!important;
      justify-content:center!important;
      border-bottom:1px solid var(--border)!important;
      cursor:grab;
      touch-action:none;
    }
    .body .pr .mobile-sheet-title::before,
    .body .pl .mobile-sheet-title::before{
      top:14px!important;
      width:48px!important;
      height:5px!important;
      background:var(--border2)!important;
    }
    .body .pr .ph{
      padding-top:14px!important;
    }

    /* 모바일 선택 핸들이 시각적으로 더 잘 보이도록 */
    .pw,.int-cv,.ov-cv{touch-action:pan-y pinch-zoom;}
    body.mobile-edit-mode .pw,
    body.mobile-edit-mode .int-cv,
    body.mobile-edit-mode .ov-cv{touch-action:none!important;}
  }

@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px){
    body.mobile-has-selection .cs,
    body.mobile-has-selection .pw,
    body.mobile-has-selection .int-cv,
    body.mobile-has-selection .ov-cv{ touch-action:none!important; }
  }

.int-cv{background:transparent!important;}

/* v42: 페이지 썸네일을 줄이지 않고, 추가 버튼만 페이지 탭 하단에 sticky 고정 */
#pane-pages{
  position:relative!important;
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:8px!important;
}
#pane-pages.hidden{display:none!important;}
#pane-pages .pages-list{
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
  overflow:visible!important;
  padding-bottom:8px!important;
}
#pane-pages .page-card{
  flex:0 0 auto!important;
}
.page-add-floating{
  position:sticky!important;
  bottom:0!important;
  margin:8px -8px -8px!important;
  padding:8px!important;
  background:linear-gradient(to top,var(--surface) 78%,rgba(255,255,255,0))!important;
  border-top:1px solid var(--border)!important;
  z-index:80!important;
}
[data-theme="dark"] .page-add-floating{
  background:linear-gradient(to top,var(--surface) 78%,rgba(23,25,30,0))!important;
}
.page-add-floating .page-add-btn{margin-top:0!important;}
.page-add-floating .page-add-btn+.page-add-btn{margin-top:4px!important;}
@media (max-width:768px){
  #pane-pages{padding:12px 14px 0!important;}
  #pane-pages .pages-list{padding-bottom:10px!important;}
  .page-add-floating{
    margin:8px -14px 0!important;
    padding:8px 14px calc(8px + env(safe-area-inset-bottom))!important;
  }
}

.mobile-element-popover{display:none;position:fixed;z-index:3100;background:var(--surface);border:1px solid var(--border2);border-radius:14px;box-shadow:0 14px 38px rgba(15,23,42,.26);padding:7px;gap:6px;align-items:center;backdrop-filter:blur(10px)}
.mobile-element-popover.open{display:flex}
.mobile-element-popover button{height:38px;border:1px solid var(--border);border-radius:11px;background:var(--surface2);color:var(--text);font-family:inherit;font-size:13px;font-weight:700;padding:0 12px;cursor:pointer;white-space:nowrap}
.mobile-element-popover button.danger{background:#fff5f5;color:var(--red);border-color:#fecaca}
[data-theme="dark"] .mobile-element-popover button.danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.35)}
.mobile-element-popover button:active{transform:scale(.96)}
@media (min-width: 1025px){.mobile-element-popover{display:none!important}}

.pw.lazy-page{background:#fff;border-radius:3px;box-shadow:0 4px 20px rgba(0,0,0,.10);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;}
.pw.lazy-page::after{content:attr(data-page) ' 페이지 로딩 중…';opacity:.55;}
.page-card.lazy-thumb .page-paper-frame{background:linear-gradient(135deg,#fff,#f3f4f6);}
.page-card.lazy-thumb .page-paper-frame::after{content:'미리보기 로딩';font-size:10px;color:#a1a8b3;}
@media (max-width:768px), (pointer: coarse) and (max-width:1024px){
  .pw.lazy-page::after{font-size:11px;}
}

.resize-handle{width:4px!important;z-index:12!important;}
.resize-handle-left{right:-2px!important;}
.resize-handle-right{left:-2px!important;}
.pl-pane{scrollbar-gutter:stable;}
#pane-pages{padding-right:10px;}

@media (max-width: 768px),(min-width:769px) and (max-width:1024px) and (orientation:portrait),(pointer:coarse) and (max-width:1024px){
  #cs{overflow:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;touch-action:pan-x pan-y!important;}
  #cs .pw{max-width:none!important;flex:0 0 auto!important;touch-action:pan-x pan-y!important;}
  #cs .pw canvas,#cs .int-cv,#cs .ov-cv{max-width:none!important;touch-action:pan-x pan-y!important;}
  body.v55-pinching #cs,body.v55-pinching #cs .pw,body.v55-pinching #cs canvas,body.v55-pinching #cs .int-cv,body.v55-pinching #cs .ov-cv{touch-action:none!important;}
  .mobile-selected-toolbar{position:fixed;left:50%;top:120px;z-index:2450;display:none;gap:6px;align-items:center;padding:7px;background:rgba(255,255,255,.97);border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 28px rgba(15,23,42,.22);backdrop-filter:blur(10px);transform:translate3d(-50%,0,0);}
  [data-theme="dark"] .mobile-selected-toolbar{background:rgba(23,25,30,.97)}
  .mobile-selected-toolbar.show{display:flex!important;}
  .mobile-selected-toolbar button{height:36px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--text);font-family:inherit;font-size:13px;font-weight:800;padding:0 12px;cursor:pointer;white-space:nowrap;}
  .mobile-selected-toolbar button.danger{background:#fff5f5;color:var(--red);border-color:#fecaca;}
  [data-theme="dark"] .mobile-selected-toolbar button.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}
  body.mobile-sheet-tools .mobile-selected-toolbar,body.mobile-sheet-pages .mobile-selected-toolbar,body.mobile-sheet-props .mobile-selected-toolbar,body.v55-pinching .mobile-selected-toolbar{display:none!important;}
  #mobileElementPopover{display:none!important;}
}
@media (min-width:1025px){.mobile-selected-toolbar{display:none!important;}}

/* v58: mobile horizontal pan boundary fix
   When #cs uses flex-column + align-items:center, zoomed pages can overflow to the
   left with a negative visual offset, making the far-left/far-right page edges
   unreachable on mobile. Start-align the scroll content and center pages only
   with auto margins so margins collapse to 0 when the page is wider than the
   viewport. This keeps full horizontal scroll range available at high zoom. */
@media (max-width: 768px),(min-width:769px) and (max-width:1024px) and (orientation:portrait),(pointer:coarse) and (max-width:1024px){
  #cs{
    align-items:flex-start!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:auto!important;
    padding-left:12px!important;
    padding-right:12px!important;
    scroll-padding-left:12px!important;
    scroll-padding-right:12px!important;
  }
  #cs .pw{
    align-self:flex-start!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #cs .pw[style]{
    max-width:none!important;
  }
}


/* === v61 MANUAL MODAL === */
.manual-top-btn{font-weight:700;color:var(--accent)}
.manual-modal-bg{z-index:2600;align-items:center;justify-content:center;padding:18px}
.manual-modal{width:min(920px,calc(100vw - 32px));max-height:min(86dvh,760px);padding:0;overflow:hidden;display:flex;flex-direction:column;border-radius:22px}
.manual-head{display:flex;justify-content:space-between;gap:18px;padding:24px 26px;background:linear-gradient(135deg,var(--accent-bg),var(--surface));border-bottom:1px solid var(--border)}
.manual-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.manual-title{font-size:25px;font-weight:900;color:var(--text);letter-spacing:-.02em}.manual-subtitle{font-size:13px;color:var(--text2);margin-top:6px;line-height:1.55}
.manual-close{width:38px;height:38px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text2);font-size:16px;cursor:pointer;flex-shrink:0;box-shadow:0 3px 14px rgba(15,23,42,.08)}
.manual-close:hover{background:var(--surface2);color:var(--text)}
.manual-body{padding:20px 22px;overflow:auto;background:var(--bg)}
.manual-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 4px 18px rgba(15,23,42,.06);margin-bottom:14px}.manual-card h3{font-size:16px;margin-bottom:12px;color:var(--text)}
.manual-card ul,.manual-steps{padding-left:18px;color:var(--text2);font-size:13px;line-height:1.75}.manual-card b{color:var(--text)}
.manual-hero{display:grid;grid-template-columns:1.35fr .9fr;gap:18px;align-items:stretch}.manual-image-slot{min-height:190px;border:2px dashed var(--border2);border-radius:18px;background:linear-gradient(135deg,var(--surface2),var(--surface));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text3);gap:6px}.manual-image-icon{font-size:36px}.manual-image-slot small{font-size:11px;color:var(--text3);max-width:220px;line-height:1.45}
.manual-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.manual-grid .manual-card{margin-bottom:14px}.shortcut-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.shortcut-grid div{display:flex;align-items:center;gap:6px;min-height:38px;padding:9px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);font-size:12px;color:var(--text2);flex-wrap:wrap}.shortcut-grid span{margin-left:auto;color:var(--text);font-weight:700}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:7px;border:1px solid var(--border2);background:var(--surface);box-shadow:inset 0 -1px 0 rgba(15,23,42,.10);font-family:'DM Mono',monospace;font-size:11px;color:var(--text)}
.manual-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border);background:var(--surface)}
@media (max-width:768px){.manual-top-btn{display:none}.manual-modal-bg{padding:10px;align-items:flex-end}.manual-modal{width:100%;max-height:88dvh;border-radius:22px 22px 0 0}.manual-head{padding:18px 18px 16px}.manual-title{font-size:22px}.manual-subtitle{font-size:12px}.manual-body{padding:14px 14px 86px}.manual-hero,.manual-grid{grid-template-columns:1fr}.shortcut-grid{grid-template-columns:1fr}.shortcut-grid div{align-items:flex-start}.shortcut-grid span{width:100%;margin-left:0;margin-top:2px}.manual-card{padding:15px;border-radius:16px}.manual-image-slot{min-height:150px}.manual-actions{position:sticky;bottom:0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 24px rgba(15,23,42,.08)}}

/* Google AdSense areas */
.adsense-area {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.08);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 10px;
}

.adsense-top {
  flex: 0 0 auto;
  min-height: 90px;
  padding: 8px 12px;
}

.adsense-side {
  min-height: 160px;
  margin: 12px;
  padding: 8px;
}

@media (max-width: 900px) {
  .adsense-side {
    display: none;
  }

  .adsense-top {
    min-height: 70px;
  }
}