/* ===== 固定レイアウト デザイナ（着脱可能。不要時はこのファイルと designer.js を削除） ===== */
.dz-overlay{position:fixed;inset:0;z-index:1000;background:#eef1f7;display:flex;flex-direction:column;font-family:system-ui,"Segoe UI",sans-serif;color:#222}
.dz-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px;background:#fff;border-bottom:1px solid #d9d9e3}
.dz-toolbar .sp{flex:1}
.dz-tb-group{display:flex;align-items:center;gap:4px;padding:0 8px;border-right:1px solid #e3e3ee}
.dz-tb-group:last-child{border-right:0}
.dz-btn{display:inline-flex;align-items:center;gap:6px;background:#eef;color:#224;border:1px solid #ccd;border-radius:6px;padding:6px 10px;font-size:.85rem;cursor:pointer;line-height:1;white-space:nowrap}
.dz-btn svg{width:16px;height:16px;flex:0 0 auto}
.dz-btn.icon{padding:6px 8px}
.dz-btn.danger{color:#c0392b;border-color:#e6b3ad;background:#fdf1ef}
.dz-btn.danger:hover{background:#fbe2de}
.dz-btn:hover{background:#e2e6ff}
.dz-btn.primary{background:#1a73e8;color:#fff;border-color:#1a73e8}
.dz-btn.on{background:#1a73e8;color:#fff;border-color:#1a73e8}
.dz-btn:disabled{opacity:.4;cursor:default}
.dz-toolbar label{font-size:.8rem;color:#555;display:inline-flex;align-items:center;gap:4px}
.dz-toolbar select,.dz-toolbar input[type=number]{padding:4px 6px;border:1px solid #ccd;border-radius:5px;font-size:.82rem}
.dz-zoom{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:5px 6px;background:#eef;border:1px solid #ccd;border-radius:5px;color:#223;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;font-size:.82rem}

.dz-body{flex:1;display:flex;min-height:0}
.dz-palette{width:180px;flex:0 0 auto;background:#fafbff;border-right:1px solid #d9d9e3;overflow:auto;padding:10px}
.dz-palette h4{margin:12px 0 6px;font-size:.78rem;color:#667;letter-spacing:.04em}
.dz-palette h4:first-child{margin-top:0}
.dz-pitem{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#fff;color:#223;border:1px solid #d9d9e3;border-radius:6px;padding:7px 9px;font-size:.83rem;margin-bottom:5px;cursor:pointer}
.dz-pitem:hover{border-color:#1a73e8;background:#f0f4ff}
.dz-pitem.placed{opacity:.5}
.dz-pitem .tag{font-size:.68rem;color:#8a93a6;margin-left:auto}
.dz-pitem svg{flex:0 0 auto}
.dz-pitem .plabel{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dz-stage{flex:1;min-width:0;overflow:auto;background:#e7ebf3;position:relative;padding:26px}
.dz-canvas{position:relative;background:#fff;box-shadow:0 2px 16px rgba(20,30,60,.16);margin:0 auto;transform-origin:top left}
.dz-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(90,120,180,.16) 1px,transparent 1px),linear-gradient(to bottom,rgba(90,120,180,.16) 1px,transparent 1px)}

.dz-el{position:absolute;box-sizing:border-box}
.dz-el.q{background:#f5f9fe;border:1px solid #cfe0f5;border-left:3px solid #1a73e8;border-radius:6px;padding:6px 8px;overflow:hidden;cursor:grab}
.dz-el .q-t{font-size:.62rem;color:#7a8aa0;text-transform:uppercase;letter-spacing:.04em}
.dz-el .q-l{font-size:.86rem;font-weight:600;color:#223;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-el .q-f{margin-top:4px;height:16px;border-radius:4px;background:#fff;border:1px solid #d9e4f2}
.dz-el.label{display:flex;align-items:flex-start;cursor:grab;overflow:hidden}
.dz-el.shape{cursor:grab}
.dz-el.image{cursor:grab;overflow:hidden;background:#f2f5fb}
.dz-el.image img{width:100%;height:100%;display:block}
.dz-el.sel{outline:2px solid #1a73e8;outline-offset:1px}
.dz-el.multi{outline:2px dashed #1a73e8}
.dz-h{position:absolute;width:10px;height:10px;background:#fff;border:1.5px solid #1a73e8;border-radius:2px;z-index:5;pointer-events:auto}
.dz-h.nw{left:-5px;top:-5px;cursor:nwse-resize}.dz-h.ne{right:-5px;top:-5px;cursor:nesw-resize}
.dz-h.sw{left:-5px;bottom:-5px;cursor:nesw-resize}.dz-h.se{right:-5px;bottom:-5px;cursor:nwse-resize}
.dz-h.n{left:50%;top:-5px;margin-left:-5px;cursor:ns-resize}.dz-h.s{left:50%;bottom:-5px;margin-left:-5px;cursor:ns-resize}
.dz-h.w{left:-5px;top:50%;margin-top:-5px;cursor:ew-resize}.dz-h.e{right:-5px;top:50%;margin-top:-5px;cursor:ew-resize}
.dz-guide{position:absolute;background:#e5484d;z-index:50;pointer-events:none}
.dz-guide.v{width:1px;top:0;bottom:0}
.dz-guide.h{height:1px;left:0;right:0}
.dz-marquee{position:absolute;border:1px solid #1a73e8;background:rgba(26,115,232,.12);z-index:40;pointer-events:none}

.dz-inspector{width:230px;flex:0 0 auto;background:#fafbff;border-left:1px solid #d9d9e3;overflow:auto;padding:12px}
.dz-inspector h4{margin:0 0 8px;font-size:.82rem;color:#445}
.dz-inspector .row{display:flex;gap:6px;margin-bottom:6px;align-items:center}
.dz-inspector label{font-size:.74rem;color:#667;display:block;margin-bottom:2px}
.dz-inspector input,.dz-inspector select,.dz-inspector textarea{width:100%;padding:5px 6px;border:1px solid #ccd;border-radius:5px;font-size:.82rem;font-family:inherit}
.dz-inspector .col{flex:1}
.dz-inspector .muted{color:#889;font-size:.76rem}
.dz-hint{color:#889;font-size:.74rem;margin-top:10px;line-height:1.6}
@media (max-width:820px){.dz-palette{width:132px}.dz-inspector{width:170px}}