:root{--stage-bg: #030b1d;--tile-bg: rgba(20, 32, 54, .9);--tile-border: rgba(148, 163, 184, .28);--tile-border-active: rgba(56, 189, 248, .6);--control-bg: rgba(10, 15, 28, .92);--control-border: rgba(148, 163, 184, .35);--control-hover: rgba(56, 189, 248, .78);--text: #f1f5f9;--text-muted: #94a3b8}.image-grid-app{position:fix;width:100%;height:100vh;min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at top left,#0f172a,#020617 70%);color:var(--text);font-family:Pretendard,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.image-grid-app.is-dragging{-webkit-user-select:none;-moz-user-select:none;user-select:none}.fullscreen-button,.help-button{position:fixed;left:20px;width:44px;height:44px;border-radius:14px;border:1px solid rgba(148,163,184,.28);background:#0f172a99;color:var(--text);display:flex;align-items:center;justify-content:center;opacity:.18;transition:opacity .2s ease,background .2s ease,border-color .2s ease;backdrop-filter:blur(12px);cursor:pointer;z-index:24}.fullscreen-button{bottom:20px}.help-button{bottom:76px}.fullscreen-button svg,.help-button svg{width:18px;height:18px;pointer-events:none}.fullscreen-button:hover,.fullscreen-button:focus-visible,.help-button:hover,.help-button:focus-visible{opacity:.9;background:#1e293be6;border-color:#94a3b880}.fullscreen-button.active,.help-button.active{opacity:.9;border-color:var(--control-hover);background:#38bdf840;color:var(--control-hover)}.help-modal-backdrop{position:fixed;inset:0;background:#020617b3;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:30}.help-modal{width:min(420px,90vw);max-height:80vh;background:#0f172af2;border-radius:18px;border:1px solid rgba(148,163,184,.25);color:var(--text);padding:24px;box-shadow:0 30px 60px #02061773;overflow-y:auto;display:flex;flex-direction:column;gap:18px}.help-modal h2{margin:0;font-size:22px}.help-modal p{margin:0;color:var(--text-muted);line-height:1.6;font-size:14px}.help-modal ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;color:var(--text-muted);font-size:14px}.help-modal button{align-self:flex-end;padding:8px 14px;border-radius:10px;border:1px solid rgba(148,163,184,.3);background:#0f172ad9;color:var(--text);font-weight:600;cursor:pointer;transition:background .2s ease,border-color .2s ease}.help-modal button:hover{border-color:#38bdf873;background:#38bdf833}.grid-stage{position:relative;flex:1;min-height:0;width:100%;height:100%;display:flex;flex-direction:column;background:var(--stage-bg);overflow:hidden}.grid-row{position:relative;display:flex;flex:1;min-height:0;align-items:stretch;gap:1px}.grid-stage>.grid-row{margin-bottom:1px}.grid-stage>.grid-row:last-of-type{margin-bottom:0}.row-drop-zone{flex:0 0 auto;height:0;margin:0;padding:0;pointer-events:none;position:relative}.row-drop-zone.visible{padding:6px 0;margin:-6px 0;pointer-events:auto}.row-drop-zone:after{content:"";position:absolute;inset:-4px 10px;border-radius:6px;background:transparent;opacity:0;transition:background .12s ease,opacity .12s ease,box-shadow .12s ease}.row-drop-zone.visible:after{background:#94a3b847;opacity:.35}.row-drop-zone.active:after{background:#38bdf8ad;box-shadow:0 0 0 1px #38bdf873;opacity:.92}.column-drop-zone{flex:0 0 auto;width:0;pointer-events:none;position:relative}.column-drop-zone.visible{width:14px;margin:0 -7px;pointer-events:auto}.column-drop-zone:after{content:"";position:absolute;inset:6px -7px;border-radius:6px;background:transparent;opacity:0;transition:background .12s ease,opacity .12s ease,box-shadow .12s ease}.column-drop-zone.visible:after{background:#94a3b847;opacity:.35}.column-drop-zone.active:after{background:#38bdf8ad;box-shadow:0 0 0 1px #38bdf873;opacity:.92}.column-spacer{pointer-events:none;min-width:0}.grid-tile{position:relative;flex:1;display:flex;min-width:0;min-height:0;border-radius:12px;border:1px solid var(--tile-border);background:var(--tile-bg);overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease;box-shadow:0 16px 40px #0206176b}.grid-tile.active{border-color:var(--tile-border-active);box-shadow:0 20px 56px #38bdf852}.tile-controls{position:absolute;top:6px;right:6px;display:flex;gap:6px;z-index:2;opacity:0;pointer-events:auto;transition:opacity .18s ease}.grid-tile:hover .tile-controls,.grid-tile:focus-within .tile-controls,.grid-tile.active .tile-controls,.tile-controls:hover,.tile-controls:focus-within{opacity:1}.tile-control{position:relative;width:28px;height:28px;border-radius:9px;background:var(--control-bg);border:1px solid var(--control-border);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease;padding:0}.tile-control svg{width:14px;height:14px;pointer-events:none}.tile-control:hover{border-color:var(--control-hover);color:var(--control-hover);background:#0f172af7}.tile-control.mode-toggle{width:26px;height:26px}.tile-control.mode-toggle.selected{border-color:var(--control-hover);background:#38bdf840;color:var(--control-hover)}.tile-control[disabled]{opacity:.45;cursor:not-allowed;border-color:#94a3b82e;pointer-events:none}.tile-control input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.tile-body{flex:1;display:flex;align-items:center;justify-content:center;padding:4px;min-height:0;min-width:0}.tile-image-frame{position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:default;touch-action:none;border-radius:10px;background:#070b1757}.tile-image-frame img{max-width:none;max-height:none;will-change:transform;transform-origin:center center;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.tile-image-frame.mode-fit-width img{width:100%;height:auto;max-width:100%;max-height:none}.tile-image-frame.mode-fit-height img{width:auto;height:100%;max-height:100%;max-width:none}.image-grid-app.space-panning .tile-image-frame{cursor:grab}.image-grid-app.space-panning .tile-image-frame:active{cursor:grabbing}.tile-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#e2e8f0eb;text-align:center;font-size:14px;letter-spacing:.01em}.tile-empty strong{color:#fff;font-size:16px;font-weight:600}.tile-resize-hit{position:absolute;pointer-events:auto;background:transparent}.tile-resize-hit.corner-se{width:18px;height:18px;right:0;bottom:0;cursor:se-resize}.tile-resize-hit.edge-east{top:0;bottom:0;width:12px;right:0;cursor:ew-resize}.tile-resize-hit.edge-south{left:0;right:0;height:12px;bottom:0;cursor:ns-resize}.stage-spacer{pointer-events:none;min-height:0}:root{color-scheme:dark;font-family:Pretendard,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#020617}body{margin:0;min-height:100vh;background:#020617;color:#e2e8f0;overflow:hidden;display:flex;flex-direction:column}.ads-container[data-astro-cid-cy4yez3e]{position:fixed;top:0;left:0;right:0;width:100%;display:flex;justify-content:center;padding:8px 0;background:#0f172ae6;border-bottom:1px solid rgba(148,163,184,.25);box-shadow:0 12px 24px #02061773;z-index:20;pointer-events:none}.ads-container[data-astro-cid-cy4yez3e] .adsbygoogle[data-astro-cid-cy4yez3e]{pointer-events:auto}.app-main[data-astro-cid-cy4yez3e]{flex:1;min-height:100vh;position:relative;z-index:10}@media (max-width: 768px){.ads-container[data-astro-cid-cy4yez3e] .adsbygoogle[data-astro-cid-cy4yez3e]{height:60px;min-height:50px}}
