:root{
  --primary:#2754e8;
  --primary-dark:#153bb0;
  --bg:#f5f7fb;
  --panel:#ffffff;
  --text:#202434;
  --muted:#667085;
  --line:#dfe5f2;
  --soft:#eef3ff;
  --shadow:0 10px 30px rgba(28,45,91,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--text);background:var(--bg)}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.app-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px}.brand h1{margin:0;font-size:1.45rem;letter-spacing:.03em}.brand p{margin:3px 0 0;color:var(--muted);font-size:.88rem}.brand-icon{width:42px;height:42px;display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.brand-icon span{border-radius:8px}.brand-icon span:nth-child(1){background:#ffd56b}.brand-icon span:nth-child(2){background:#a5b7ff}.brand-icon span:nth-child(3){background:#ef7bd3}.brand-icon span:nth-child(4){background:#708cff}
.header-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.primary-btn,.ghost-btn,.small-btn{border:0;border-radius:12px;padding:11px 16px;font-weight:700}.primary-btn{background:var(--primary);color:#fff;box-shadow:0 7px 16px rgba(39,84,232,.20)}.primary-btn:hover{background:var(--primary-dark)}.ghost-btn,.small-btn{background:#fff;color:#2d3a62;border:1px solid var(--line)}.ghost-btn:hover,.small-btn:hover{background:var(--soft)}.wide{width:100%;padding:15px 18px;font-size:1rem}.small-btn{padding:8px 10px;font-size:.82rem;border-radius:10px}
.app-shell{display:grid;grid-template-columns:320px minmax(420px,1fr) 300px;gap:16px;max-width:1500px;margin:18px auto;padding:0 16px 12px}.side-panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.panel-section{padding:18px;border-bottom:1px solid var(--line)}.panel-section:last-child{border-bottom:0}.panel-section h2{font-size:1rem;margin:0 0 14px}.file-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:18px;border:2px dashed #b8c7f6;border-radius:16px;background:#f7f9ff;text-align:center;color:#28417b}.file-drop.dragover{border-color:var(--primary);background:#eef3ff}.file-drop input{display:none}.file-drop .plus{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:1.4rem}.file-drop small{color:var(--muted)}.thumb-tools{display:flex;justify-content:center;margin:10px 0}.thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:40px}.thumb{position:relative;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#eee;aspect-ratio:1.2/1;box-shadow:0 2px 8px rgba(0,0,0,.06)}.thumb.dragging{opacity:.45}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb button{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.60);color:#fff;line-height:1;font-size:13px}.layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.layout-btn{min-height:70px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#2b3350;font-weight:700;font-size:.78rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.layout-btn.active,.layout-btn:hover{border-color:var(--primary);background:var(--soft);color:var(--primary)}.layout-icon{width:32px;height:26px;border:2px solid currentColor;border-radius:3px;position:relative}.grid4:before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid currentColor}.grid4:after{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid currentColor}.two-v:before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid currentColor}.two-h:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid currentColor}.three:before{content:"";position:absolute;left:33%;top:0;bottom:0;border-left:2px solid currentColor}.three:after{content:"";position:absolute;left:66%;top:0;bottom:0;border-left:2px solid currentColor}.mosaic:before{content:"";position:absolute;left:55%;top:0;bottom:0;border-left:2px solid currentColor}.mosaic:after{content:"";position:absolute;left:55%;right:0;top:50%;border-top:2px solid currentColor}.free{border-style:dashed;transform:rotate(-4deg)}
.inline-control,.select-control,.range-control,.toggle-control{display:grid;gap:8px;margin:12px 0;color:#34405f;font-size:.9rem}.inline-control{grid-template-columns:1fr auto;align-items:center}.inline-control input[type=color]{width:42px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff}.range-control{grid-template-columns:1fr 72px;align-items:center}.range-control input{grid-column:1/2}.range-control output{grid-column:2/3;grid-row:1/3;text-align:center;border:1px solid var(--line);border-radius:8px;padding:7px 4px;background:#fff}.toggle-control{grid-template-columns:auto 1fr;align-items:center}.select-control select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}.custom-size{display:grid;grid-template-columns:1fr 1fr;gap:8px}.custom-size label{display:grid;gap:5px;color:#34405f;font-size:.85rem}.custom-size input{width:100%;padding:8px;border:1px solid var(--line);border-radius:10px}.orientation-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.stage-area{min-width:0}.canvas-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-bottom:10px}.zoom-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem}.canvas-frame{position:relative;display:grid;place-items:center;min-height:520px;background:linear-gradient(180deg,#edf3ff 0%,#f6f9ff 100%);border:1px solid #c9d6f3;border-radius:18px;box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.55);overflow:auto;padding:28px}.work-area-badge{position:absolute;top:14px;left:16px;padding:6px 10px;border-radius:999px;background:#ffffff;color:#29418c;border:1px solid #c8d5f7;font-size:.78rem;font-weight:700;box-shadow:0 4px 10px rgba(25,55,120,.08);z-index:2}#collageCanvas{display:block;background:#fff;max-width:100%;height:auto;border-radius:8px;transform-origin:center center;box-shadow:0 10px 28px rgba(0,0,0,.10);outline:2px solid #d7e1fb}#collageCanvas.free-ready{cursor:grab}.empty-state{position:absolute;inset:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;border:2px dashed #b9c8ec;border-radius:14px;color:#4e5d83;background:rgba(255,255,255,.88)}.empty-state strong{color:#34405f;font-size:1.1rem}.hint-box{margin-top:14px;padding:16px 18px;border:1px solid #cfdcff;border-radius:14px;background:#f7faff;color:#34405f}.hint-box strong{color:#2441a2}.hint-box ul{margin:8px 0 0;padding-left:1.25em}.hint-box li{margin:4px 0;font-size:.9rem}
.site-footer{text-align:center;padding:10px 0 20px;font-size:.95rem;color:#1565c0;background:#f7f9ff;border-top:1px solid #d7e6f8}.site-footer a{color:#1565c0;font-weight:bold}.site-footer a:hover{color:#0d47a1}.ad-panel{max-width:1120px;margin:12px auto;padding:0;border:1px solid #d7e6f8;border-radius:10px;background:#fff;overflow:hidden}.ad-panel[hidden]{display:none!important;margin:0!important;padding:0!important;border:0!important;height:0!important;overflow:hidden!important}.ad-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;background:#f4f8ff;border-bottom:1px solid #d7e6f8}.ad-label{font-size:.72rem;color:#4f6f91;line-height:1}.ad-status{font-size:.72rem;color:#4f6f91;margin-left:auto}.ad-close-btn{margin:0!important;padding:3px 8px!important;min-height:0;height:auto;line-height:1.2;border:0;border-radius:999px;background:#1565c0;color:#fff;font-size:.72rem!important;font-weight:700;cursor:pointer;appearance:none;-webkit-appearance:none}.ad-close-btn:hover{background:#0d47a1}.ad-body{padding:8px;background:#fff}
@media (max-width:1100px){.app-shell{grid-template-columns:1fr}.side-panel{order:0}.stage-area{order:-1}.left-panel,.right-panel{display:grid;grid-template-columns:repeat(2,1fr)}.panel-section{border-right:1px solid var(--line)}.panel-section:nth-child(even){border-right:0}}@media (max-width:720px){.app-header{position:static;align-items:flex-start;flex-direction:column}.header-actions{width:100%}.header-actions button{flex:1}.app-shell{padding:0 10px}.left-panel,.right-panel{display:block}.canvas-frame{min-height:360px;padding:12px}.layout-grid{grid-template-columns:repeat(2,1fr)}.thumb-grid{grid-template-columns:repeat(4,1fr)}.range-control{grid-template-columns:1fr 58px}.brand h1{font-size:1.25rem}}


/* v1.1.0 自由配置操作ガイド */
.free-help{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #cdd8ff;
  border-radius:12px;
  background:#f4f7ff;
  color:#34406a;
  font-size:.82rem;
  line-height:1.65;
}
.free-help strong{display:block;margin-bottom:4px;color:#20306a}
.free-help span{display:block;color:#56627f}
.canvas-frame.free-mode{cursor:grab}
.canvas-frame.free-mode:active{cursor:grabbing}
#collageCanvas{touch-action:none}

#collageCanvas.is-hover-move{cursor:move}#collageCanvas.is-hover-resize{cursor:nwse-resize}#collageCanvas.is-hover-rotate{cursor:crosshair}#collageCanvas.is-dragging{cursor:grabbing}

/* v1.2.1 visibility and interaction fixes */
.canvas-frame{background:linear-gradient(180deg,#e1ebff 0%,#f3f7ff 100%) !important;border:1px solid #b8caef !important;}
.work-area-badge{background:#2147b7 !important;color:#fff !important;border-color:#2147b7 !important;}
#collageCanvas{outline:3px solid #b7c9f6 !important;border-radius:10px !important;position:relative;z-index:1;}
.empty-state{pointer-events:none !important;background:rgba(255,255,255,.55) !important;color:#31446f !important;border-color:#9eb4e6 !important;}
.empty-state strong{font-size:1.28rem !important;color:#1f3772 !important;}
.canvas-frame.free-mode{background-image:linear-gradient(rgba(60,92,176,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(60,92,176,.06) 1px, transparent 1px),linear-gradient(180deg,#e3edff 0%,#f5f8ff 100%);background-size:24px 24px,24px 24px,auto;}
#collageCanvas.free-ready{cursor:grab !important;}
#collageCanvas.is-hover-move{cursor:move !important;}
#collageCanvas.is-hover-resize{cursor:nwse-resize !important;}
#collageCanvas.is-hover-rotate{cursor:alias !important;}
#collageCanvas.is-dragging{cursor:grabbing !important;}