@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap";:root{--primary: #0a0a0a;--primary-dark: #333}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,Noto Sans JP,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#fafafa;min-height:100vh;padding:0;color:#0a0a0a;-webkit-font-smoothing:antialiased}.header{padding:16px 40px;border-bottom:1px solid #e5e5e5;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffc;position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center}.header h1{font-size:1.4em;font-weight:700;letter-spacing:-.5px;color:#0a0a0a}.segmented-control{background:#f0f0f0;padding:3px;border-radius:6px;display:flex;gap:2px;margin-left:auto}.segmented-option{padding:4px 12px;font-size:.8em;font-weight:600;color:#888;cursor:pointer;border-radius:4px;transition:all .2s;-webkit-user-select:none;user-select:none}.segmented-option:hover{color:#666}.segmented-option.active{background:#fff;color:#0a0a0a;box-shadow:0 1px 2px #0000001a}.container{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:480px 1fr;height:calc(100vh - 85px)}.sidebar{background:#fff;border-right:1px solid #e5e5e5;overflow-y:auto;padding:32px 28px;height:100%}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:2px}.section{margin-bottom:40px}.section-title{font-size:.8em;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px}.upload-area{border:1px dashed #d0d0d0;border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .2s;background:#fafafa;position:relative}.upload-area:hover{border-color:#a0a0a0;background:#f5f5f5}.upload-area-text{font-size:.9em;color:#888;margin-top:12px}.hidden-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.image-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.image-item{aspect-ratio:1;background:#fafafa;border:1px solid #e5e5e5;border-radius:6px;overflow:visible;cursor:pointer;transition:all .2s;position:relative}.image-item:hover{border-color:#d0d0d0;z-index:20}.image-item img{width:100%;height:100%;object-fit:contain;z-index:1;border-radius:6px}.image-label{position:absolute;top:8px;left:8px;font-size:.7em;color:#666;background:#ffffffe6;padding:3px 8px;border-radius:3px;font-weight:500;z-index:2;pointer-events:none}.image-item .icon-btn-overlay{position:absolute;top:8px;right:8px;width:24px;height:24px;background:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;color:#666;transition:all .2s;padding:0}.image-item .icon-btn-overlay:hover{background:#fff;color:#d00;border-color:#d003}.control-row{margin-bottom:24px}.control-label{font-size:.85em;color:#aaa;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.control-value{color:#333;font-weight:600}input[type=range]{width:100%;height:2px;background:#e5e5e5;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:1px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#0a0a0a;border-radius:50%;cursor:pointer;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}select{width:100%;padding:10px 12px;background:#fafafa;border:1px solid #e5e5e5;border-radius:6px;color:#0a0a0a;font-size:.9em;cursor:pointer;outline:none;font-family:inherit}select:hover{border-color:#d0d0d0}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.toggle-label{font-size:.85em;color:#aaa}.toggle-wrapper{position:relative}.toggle-checkbox{position:absolute;opacity:0;width:0;height:0}.toggle-track{width:40px;height:22px;background:#e5e5e5;border-radius:11px;position:relative;cursor:pointer;transition:all .2s;display:block}.toggle-checkbox:checked+.toggle-track{background:#0a0a0a}.toggle-track:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:2px;left:2px;transition:all .2s}.toggle-checkbox:checked+.toggle-track:after{left:20px}.preview-area{background:#e4e4e7;display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;overflow:hidden;box-shadow:inset 0 0 20px #0000000d}[data-tooltip]{position:relative}[data-tooltip]:before{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);padding:6px 10px;background:#18181b;color:#fff;font-size:.75rem;font-weight:500;white-space:nowrap;border-radius:4px;opacity:0;pointer-events:none;transition:all .2s;margin-bottom:5px;box-shadow:0 4px 6px -1px #0000001a;z-index:50}[data-tooltip]:after{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(0);border:5px solid transparent;border-top-color:#18181b;opacity:0;pointer-events:none;transition:all .2s;margin-bottom:0;z-index:50}[data-tooltip]:hover:before,[data-tooltip]:hover:after{opacity:1;transform:translate(-50%) translateY(-4px)}.canvas-container{width:100%;height:100%;outline:none}.preview-placeholder{display:none}.toolbar{position:absolute;bottom:32px;left:50%;transform:translate(-50%);display:flex;gap:8px;background:#141414e6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:12px 16px;border-radius:12px;z-index:10}.tool-btn{width:36px;height:36px;background:transparent;border:none;border-radius:6px;cursor:pointer;color:#888;transition:all .2s;display:flex;align-items:center;justify-content:center}.tool-btn:hover{background:#1a1a1a;color:#fff}.btn-primary{background:#0a0a0a;color:#fff;border:none;padding:12px 20px;border-radius:6px;font-weight:600;font-size:.85em;cursor:pointer;transition:all .2s;width:100%}.btn-primary:hover{background:#2a2a2a}.secondary-btn{background:transparent;color:#666;border:1px solid #e5e5e5;padding:12px 20px;border-radius:6px;font-weight:500;font-size:.85em;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.secondary-btn:hover{background:#fafafa;border-color:#d0d0d0;color:#333}.status{margin-top:1rem;padding:10px;border-radius:6px;background:#f0f0f0;font-size:.8em;color:#666;text-align:center}.status.success{background:#d4edda;color:#155724}.status.error{background:#f8d7da;color:#721c24}.hidden{display:none}.toast{position:fixed;bottom:24px;right:24px;background:#333;color:#fff;padding:12px 24px;border-radius:8px;font-size:.9em;opacity:0;transition:opacity .3s;pointer-events:none;z-index:200}.toast.show{opacity:1}@media (max-width: 768px){.container{grid-template-columns:1fr;height:calc(100vh - 60px);display:flex;flex-direction:column}.preview-area{height:45vh;width:100%;order:1}.sidebar{height:55vh;order:2;padding:20px;border-right:none;border-top:1px solid #e5e5e5}.header{padding:12px 20px}.tool-btn{width:44px;height:44px}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}.segmented-option{padding:8px 12px}select,input[type=text],.secondary-btn{height:44px}.toolbar{background:#14141499;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);bottom:20px;width:auto;max-width:90%}.toolbar .tool-btn{color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.sidebar{width:auto;max-width:100%;box-sizing:border-box}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.modal.hidden{display:none}.modal-content{background:#fff;padding:20px;border-radius:8px;width:90%;max-width:500px;text-align:center;box-shadow:0 4px 12px #00000080;display:flex;flex-direction:column;gap:15px}.modal-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:1.1em}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:0 8px}.modal-body img{max-width:100%;height:auto;border:1px solid #ddd;border-radius:4px}.modal-footer{font-size:.9em;color:#666}