:root{--bg: #f2f3f5;--panel: #ffffff;--border: #dfe2e6;--text: #1d2129;--muted: #7a8088;--accent: #2563eb;--accent-weak: #eff4ff;--danger: #dc2626;--green: #06c755;--radius: 8px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Noto Sans JP,Yu Gothic UI,sans-serif;background:var(--bg);color:var(--text);font-size:13px}#root{height:100vh;display:flex;flex-direction:column}button{font-family:inherit}input,textarea,select{font-family:inherit;font-size:13px;border:1px solid var(--border);border-radius:6px;padding:6px 8px;background:#fff;color:var(--text);width:100%}input:focus,textarea:focus,select:focus{outline:2px solid var(--accent-weak);border-color:var(--accent)}textarea{resize:vertical;min-height:60px}label.fld{display:block;margin-bottom:10px}label.fld>span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px;font-weight:600}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:6px;padding:7px 12px;font-size:13px;cursor:pointer;font-weight:600}.btn:hover{background:#f7f8fa}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:#1d4ed8}.btn.danger{color:var(--danger);border-color:#f3c1c1}.btn.danger:hover{background:#fef2f2}.btn.small{padding:3px 8px;font-size:12px}.btn.block{display:flex;width:100%}.btn:disabled{opacity:.5;cursor:default}.header{height:48px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 14px;flex-shrink:0}.header h1{font-size:14px;margin:0;white-space:nowrap}.header .pname{width:280px;font-weight:600}.header .saved{font-size:11px;color:var(--muted);white-space:nowrap;margin-left:auto}.main{flex:1;display:grid;grid-template-columns:300px 1fr 360px;min-height:0}.pane{background:var(--panel);overflow-y:auto;min-height:0}.pane.left{border-right:1px solid var(--border);display:flex;flex-direction:column}.pane.center{background:var(--bg);display:flex;flex-direction:column;align-items:center}.pane.right{border-left:1px solid var(--border)}.list-toolbar{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:5}.block-list{flex:1;padding:8px}.block-list.drag-over{background:var(--accent-weak)}.block-row{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;margin-bottom:4px;background:#fff}.block-row:hover{background:#f7f8fa}.block-row.selected{border-color:var(--accent);background:var(--accent-weak)}.block-row .thumb{width:44px;height:44px;object-fit:cover;border-radius:4px;border:1px solid var(--border);background:#fafafa;flex-shrink:0}.block-row .thumb.icon{display:flex;align-items:center;justify-content:center;font-size:18px}.block-row .meta{flex:1;min-width:0}.block-row .meta .name{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.block-row .meta .sub{font-size:11px;color:var(--muted)}.block-row .ops{display:flex;flex-direction:column;gap:2px}.block-row .ops button{border:none;background:none;cursor:pointer;font-size:11px;color:var(--muted);padding:1px 4px;border-radius:4px;line-height:1.2}.block-row .ops button:hover{background:#eceef1;color:var(--text)}.drop-hint{margin:10px;padding:24px 12px;border:2px dashed var(--border);border-radius:var(--radius);text-align:center;color:var(--muted);font-size:12px;line-height:1.8}.preview-toolbar{display:flex;align-items:center;gap:8px;padding:10px;width:100%;justify-content:center;flex-shrink:0}.preview-toolbar .note{font-size:11px;color:var(--muted)}.preview-scroll{flex:1;overflow:auto;width:100%;display:flex;justify-content:center;min-height:0}.phone{width:390px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 24px #00000014;margin:0 20px 40px;position:relative;overflow:hidden;align-self:flex-start;flex-shrink:0;transform-origin:top center}.phone .lp-stack{min-height:200px}.phone .pv-block{position:relative;cursor:pointer}.phone .pv-block.selected:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;outline:2px solid var(--accent);outline-offset:-2px;pointer-events:none}.phone img.pv-img{display:block;width:100%;height:auto}.pv-empty{padding:60px 24px;text-align:center;color:var(--muted);font-size:12px;line-height:2}.wire-wrap{position:relative}.wire-canvas{position:relative;border:2px dashed #b6bcc6;background:linear-gradient(#f1f3f6 1px,transparent 1px) 0 0 / 100% 26px,linear-gradient(90deg,#f1f3f6 1px,transparent 1px) 0 0 / 26px 100%,#fbfcfd;overflow:hidden;box-sizing:content-box}.wire-canvas.editing{border-color:var(--accent);cursor:default}.wire-tag{position:absolute;top:6px;left:6px;background:#6b7280;color:#fff;font-size:10px;padding:2px 8px;border-radius:999px;z-index:30;pointer-events:none}.wire-canvas.editing .wire-tag{background:var(--accent)}.wire-tag em{font-style:normal;opacity:.75;margin-left:6px;font-size:9px}.wire-empty-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;pointer-events:none}.wel{position:absolute;box-sizing:border-box;line-height:1.45;overflow:hidden;user-select:none;-webkit-user-select:none}.editing .wel{cursor:move}.editing .wel:hover{outline:1px dashed #9db4e8}.wel.sel{outline:2px solid var(--accent)!important;z-index:20}.wel .placeholder{opacity:.45}.wel-headline{color:#111827;display:flex;align-items:center}.wel-headline>span,.wel-sub>span,.wel-body>span{width:100%}.wel-sub{color:#374151;display:flex;align-items:center}.wel-body{color:#6b7280}.wel-image{border:1px solid #b9c0ca;background:repeating-linear-gradient(-45deg,#eceff3,#eceff3 8px,#e2e6ec 8px,#e2e6ec 16px);display:flex;align-items:center;justify-content:center;color:#5b6472}.wel-image .wel-label{background:#ffffffe6;border-radius:999px;padding:3px 12px;font-weight:700;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wel-button{background:#374151;color:#fff;border-radius:999px;display:flex;align-items:center;justify-content:center}.wel-badge{border:1.5px solid #6b7280;color:#6b7280;border-radius:999px;display:flex;align-items:center;justify-content:center}.wel-list{color:#374151}.wel-box{border:1.5px dashed #9aa1ab;color:#8a919c}.wel-box .wel-boxlabel{font-size:11px;padding:2px 4px;display:block}.wel-line{display:flex;align-items:center}.wel-line .wel-hr{width:100%;border-top:2px solid #9aa1ab}.wel-logo{background:#fff;border:1.5px dashed #9aa1ab;display:flex;align-items:center;justify-content:center;text-align:center}.wel-logo .wel-logo-label{font-weight:700;color:#9aa1ab}.wel-logo .wel-logo-label small{display:block;font-weight:400;font-size:10px;color:#9aa1ab}.wel-space{background:#fcfcfd;border:1px dashed #c8cdd4;display:flex;align-items:center;justify-content:center;color:#9aa1ab}.wire-canvas.has-bg{background:#fff}.canvas-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.wel-photo-empty{width:100%;height:100%;background:#e8ecf1;display:flex;align-items:center;justify-content:center;text-align:center;color:#8a919c;font-size:10px;padding:6px}.wel-photo-clip{position:relative;width:100%;height:100%;overflow:hidden}.wel-photo-clip img{position:absolute;max-width:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.wel.pan-mode{outline:2px solid var(--green)!important;z-index:24;cursor:grab}.wel.pan-mode:active{cursor:grabbing}.pan-tip{position:absolute;left:50%;bottom:-26px;transform:translate(-50%);white-space:nowrap;background:var(--green);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;z-index:30;pointer-events:none}.shape-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.shape-btn{border:1px solid var(--border);background:#fff;border-radius:6px;padding:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;height:38px}.shape-btn:hover{border-color:var(--accent);background:var(--accent-weak)}.shape-btn.active{border-color:var(--accent);background:var(--accent-weak);box-shadow:0 0 0 1px var(--accent)}.shape-btn i{display:block;width:30px;height:30px;background:#64748b}.shape-btn.active i{background:var(--accent)}.tpl-list{margin-top:8px;background:var(--accent-weak);border-radius:8px;padding:8px;max-height:420px;overflow-y:auto}.tpl-cat{font-size:11px;font-weight:700;color:var(--muted);margin:8px 2px 4px}.tpl-cat:first-child{margin-top:0}.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.tpl-btn{border:1px solid var(--border);background:#fff;border-radius:8px;padding:6px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--text)}.tpl-btn:hover{border-color:var(--accent)}.tpl-thumb{position:relative;display:block;background:#f4f6f8;border:1px solid var(--border);border-radius:4px;overflow:hidden}.tpl-thumb .tt{position:absolute;display:block}.tt-photo{background:#93aecb}.tt-image{background:#c3cdd9}.tt-headline{background:#374151;border-radius:1px}.tt-sub,.tt-body,.tt-list{background:#9aa1ab}.tt-button{background:#1f2937;border-radius:99px}.tt-badge{background:#fff;border:1px solid #6b7280;border-radius:99px}.tt-logo,.tt-space{background:#fff;border:1px dashed #b6bcc6}.tt-pattern{background:repeating-linear-gradient(-45deg,#dde3ea,#dde3ea 3px,#eef1f5 3px,#eef1f5 6px)}.tt-box{border:1px dashed #9aa1ab}.tt-line{background:#9aa1ab}.wel-pattern{border:1.5px dashed #9aa1ab}.wel-pattern-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.pat-badge{position:absolute;top:4px;left:4px;background:#6b7280;color:#fff;font-size:9px;font-weight:700;padding:2px 8px;border-radius:999px;z-index:2}.pat-note{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:10px;color:#6b7280}.pat-carousel{display:flex;gap:6px;width:105%;margin-top:10px}.pat-carousel>div{flex:0 0 34%;height:60%;min-height:46px;background:#fff;border:1.5px solid #b9c0ca;border-radius:8px}.pat-logos{display:flex;gap:6px;width:92%;justify-content:center}.pat-logos>span{flex:1;height:22px;background:#d5dae1}.pat-steps{font-size:17px;font-weight:700;color:#374151;letter-spacing:2px}.pat-ba{display:flex;gap:6px;align-items:center;width:92%;height:62%;margin-top:8px}.pat-ba>div{flex:1;height:100%;border:1.5px solid #b9c0ca;font-size:10px;font-weight:700;color:#6b7280;padding:4px}.pat-ba>div:first-child{background:#eceff3}.pat-ba>span{color:#dc2626;font-weight:700}.pat-testimonial{display:flex;gap:8px;align-items:center;width:88%}.pat-testimonial .face{width:26px;height:26px;border-radius:50%;background:#d5dae1;flex-shrink:0}.pat-testimonial .bubble{flex:1;height:30px;background:#fff;border:1px solid #b9c0ca;border-radius:8px}.pat-table{width:88%;height:60%;min-height:40px;background:linear-gradient(#b9c0ca 1px,transparent 1px) 0 0 / 100% 33.3%,linear-gradient(90deg,#b9c0ca 1px,transparent 1px) 0 0 / 33.3% 100%,linear-gradient(90deg,transparent 33.3%,rgba(37,99,235,.08) 33.3%,rgba(37,99,235,.08) 66.6%,transparent 66.6%);border:1px solid #b9c0ca}.hdl{position:absolute;width:10px;height:10px;background:#fff;border:2px solid var(--accent);border-radius:2px;z-index:25}.hdl-se{right:-5px;bottom:-5px;cursor:nwse-resize}.hdl-e{right:-5px;top:50%;margin-top:-5px;cursor:ew-resize}.hdl-s{bottom:-5px;left:50%;margin-left:-5px;cursor:ns-resize}.guide{position:absolute;background:#f43f5e;z-index:15;pointer-events:none}.guide-v{left:50%;top:0;bottom:0;width:1px}.guide-h{top:50%;left:0;right:0;height:1px}.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pal-btn{border:1px solid var(--border);background:#fff;border-radius:6px;padding:8px 4px;font-size:11px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:600;color:var(--text)}.pal-btn:hover,.pal-btn.active{background:var(--accent-weak);border-color:var(--accent)}.palette.patterns{margin-top:6px;background:var(--accent-weak);border-radius:8px;padding:6px;grid-template-columns:repeat(2,1fr)}.pal-icon{font-size:15px;line-height:1}.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.num-grid .fld.chk{display:flex;flex-direction:column;align-items:flex-start}.num-grid .fld.chk input{width:18px;height:18px;margin-top:4px}.el-props-head{margin-bottom:8px}.el-actions{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}.pv-img-loading{padding:40px 16px;text-align:center;color:var(--muted);font-size:12px}.frame-assigned-tag{position:absolute;top:6px;left:6px;background:#2563ebe6;color:#fff;font-size:10px;padding:2px 8px;border-radius:999px;z-index:2}.pv-cta{padding:16px;text-align:center}.pv-cta .bubble{margin:0 0 8px;font-size:13px;font-weight:700}.pv-cta a,.pv-cta-fixed a{display:block;padding:15px 24px;font-size:16px;font-weight:700;text-decoration:none;text-align:center}.pv-cta-fixed{position:sticky;bottom:0;padding:10px 16px;background:#ffffffeb;box-shadow:0 -2px 12px #0000001f}.tabs{display:flex;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:5}.tabs button{flex:1;border:none;background:none;padding:10px 4px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}.panel-body{padding:14px}.panel-body h3{font-size:13px;margin:0 0 10px}.panel-body .hint{font-size:11px;color:var(--muted);line-height:1.7;margin:6px 0 12px}.divider{border:none;border-top:1px solid var(--border);margin:16px 0}.el-row{display:flex;gap:6px;margin-bottom:6px;align-items:center}.el-row select{width:118px;flex-shrink:0}.el-row .ops{display:flex;gap:2px}.el-row .ops button{border:none;background:none;cursor:pointer;color:var(--muted);font-size:12px;padding:2px 3px;border-radius:4px}.el-row .ops button:hover{background:#eceef1;color:var(--text)}.color-row{display:flex;gap:8px}.color-row label.fld{flex:1}.color-row input[type=color]{padding:2px;height:32px}.export-status{font-size:12px;color:var(--accent);margin-top:8px;min-height:18px}.warn-list{font-size:11px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:8px 10px;line-height:1.7;margin-top:8px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:#fff;border-radius:12px;width:520px;max-height:70vh;overflow-y:auto;padding:18px}.modal h2{font-size:15px;margin:0 0 12px}.proj-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid var(--border)}.proj-row .info{flex:1;min-width:0}.proj-row .info .nm{font-weight:700}.proj-row .info .dt{font-size:11px;color:var(--muted)}.copied-note{font-size:11px;color:var(--green);font-weight:700;margin-left:6px}