:root{--blue:#2563eb;--blue2:#1d4ed8;--ink:#172033;--muted:#667085;--line:#dce3ee;--soft:#f5f8fc;--white:#fff;--shadow:0 14px 38px rgba(25,42,70,.1)}*{box-sizing:border-box}html{background:#eef3f9}body{margin:0;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif}.app{width:min(1220px,calc(100% - 28px));margin:22px auto 110px}.hero{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px}.hero h1{margin:3px 0 8px;font-size:clamp(25px,4vw,38px)}.hero p{margin:0;color:var(--muted);line-height:1.55}.eyebrow{color:var(--blue)!important;font-size:13px;font-weight:800}.privacy{max-width:420px;padding:12px 15px;border:1px solid #bcd6ff;border-radius:12px;background:#edf5ff;color:#174b87!important;font-size:13px}.upload{min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px;border:2px dashed #8fb8f4;border-radius:22px;background:#fff;text-align:center;box-shadow:var(--shadow);cursor:pointer}.upload.drag{background:#edf5ff;border-color:var(--blue)}.upload h2{margin:10px 0 6px}.upload p,.upload small{color:var(--muted)}.uploadIcon{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:#e7f0ff;color:var(--blue);font-size:38px}.primary,button.primary{background:var(--blue);border-color:var(--blue);color:#fff}.large{min-width:190px;margin:18px 0 12px;font-size:16px}.hidden{display:none!important}button,select,input{font:inherit}button,select{min-height:44px;padding:9px 14px;border:1px solid #cdd6e3;border-radius:10px;background:#fff;color:var(--ink)}button{cursor:pointer;font-weight:750}button:hover{border-color:#86a9dc}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #a9c9ff;outline-offset:2px}.loading{padding:20px;text-align:center;font-weight:800;color:var(--blue)}.workspace{display:grid;grid-template-columns:minmax(340px,1.12fr) minmax(360px,.88fr);gap:20px;align-items:start}.previewColumn,.controls,.skinDrawer,.editor{min-width:0}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}.toolbar button{flex:1}.canvasShell{display:grid;place-items:center;min-height:620px;padding:18px;border-radius:18px;background:#172033;background-image:linear-gradient(45deg,#1f2a3b 25%,transparent 25%),linear-gradient(-45deg,#1f2a3b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1f2a3b 75%),linear-gradient(-45deg,transparent 75%,#1f2a3b 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;box-shadow:var(--shadow);overflow:hidden;touch-action:none}.canvasShell canvas{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;background:#fff;box-shadow:0 10px 28px #0008}.canvasHint{text-align:center;color:var(--muted);font-size:12px}.controls{display:grid;gap:14px}.panel,.skinDrawer,.editor{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.panel h2,.sectionHead h2{margin:0;font-size:17px}.ratioGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.choice{display:flex;min-width:0;flex-direction:column;gap:3px}.choice small{color:var(--muted);font-size:10px}.choice.active,.segmented button.active,.editorTabs button.active,.filterRow button.active{border-color:var(--blue);background:#eaf2ff;color:#164eae}.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.sectionHead button{min-width:max-content}.recommendGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.skinCard{min-width:0;padding:7px;text-align:left}.skinThumb{display:block;aspect-ratio:1/1;border-radius:8px;margin-bottom:7px;overflow:hidden;background:#eee}.skinThumb canvas{width:100%;height:100%;display:block}.skinCard b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.skinCard em{display:inline-block;margin-top:5px;padding:3px 7px;border-radius:99px;background:#e8f7ed;color:#14713b;font-size:10px;font-style:normal}.wide{width:100%}.saveRow{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:10px;margin-top:14px}.skinDrawer,.editor{margin-top:20px}.filterRow,.editorTabs,.segmented{display:flex;gap:10px;overflow-x:auto;padding:4px 0 10px}.filterRow button,.editorTabs button,.segmented button{flex:0 0 auto}.skinGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.editorTabs{border-bottom:1px solid var(--line)}.editorTabs button{min-width:90px}.editorBody{padding-top:16px}.editPane{display:none}.editPane.active{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}.editPane h3{grid-column:1/-1;margin:0}.editPane label{display:flex;flex-direction:column;gap:8px;color:#475467;font-size:13px}.editPane input[type=range]{width:100%}.colorRow{display:flex;gap:9px;flex-wrap:wrap}.colorDot{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%}.iconGrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(10,1fr);gap:8px}.iconBtn{padding:8px;font-size:24px}.selectedControls{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}.inputAction{display:flex;gap:10px}.inputAction input{min-height:44px;flex:1;padding:9px 12px;border:1px solid #cdd6e3;border-radius:10px}.mobileBar{position:fixed;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:12px;padding:12px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:#fffe;border-top:1px solid var(--line);backdrop-filter:blur(12px)}.toast{position:fixed;z-index:40;left:50%;bottom:90px;translate:-50% 20px;padding:11px 16px;border-radius:10px;background:#172033;color:#fff;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;translate:-50% 0}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.canvasShell{min-height:520px}.skinGrid{grid-template-columns:repeat(4,1fr)}.hero{align-items:stretch;flex-direction:column}.privacy{max-width:none}}
@media(max-width:620px){.app{width:100%;margin:0 0 105px;padding:14px;overflow-x:hidden}.hero{gap:12px}.hero h1{font-size:26px}.upload{min-height:340px;padding:24px 15px;border-radius:16px}.workspace{gap:14px}.toolbar span{display:none}.canvasShell{min-height:440px;padding:10px;border-radius:14px}.canvasShell canvas{max-height:64vh}.panel,.skinDrawer,.editor{padding:14px;border-radius:14px}.ratioGrid{grid-template-columns:repeat(2,1fr);gap:12px}.recommendGrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.recommendGrid .skinCard{flex:0 0 42%;scroll-snap-align:start}.saveRow{grid-template-columns:1fr 1fr}.saveRow .primary{grid-column:1/-1}.skinGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.editPane.active{grid-template-columns:1fr}.editPane h3,.iconGrid,.selectedControls{grid-column:auto}.iconGrid{grid-template-columns:repeat(5,1fr)}.selectedControls{grid-template-columns:1fr 1fr}.mobileBar:not(.hidden){display:grid}.editor{position:relative;z-index:auto;left:auto;right:auto;bottom:auto;max-height:none;margin-top:10px;border-radius:14px;overflow:visible;box-shadow:var(--shadow)}.editorTabs{position:static;z-index:auto;background:#fff;padding-top:4px}.controls{padding-bottom:5px}}

/* Compact preview: visual preview only; exported image resolution is unchanged. */
.canvasShell{min-height:220px}
.canvasShell canvas{max-height:24vh}
@media(max-width:900px){.canvasShell{min-height:190px}}
@media(max-width:620px){.canvasShell{min-height:160px}.canvasShell canvas{max-height:22vh}}

/* 2026-08-19 compact vertical layout */
.hero{gap:14px;margin-bottom:10px}.hero h1{margin:0 0 4px;font-size:clamp(23px,3vw,32px)}
.privacy{width:max-content;max-width:100%;padding:5px 8px;border-radius:8px;font-size:10px;white-space:nowrap}
.toolbar{flex-wrap:nowrap;gap:6px;margin-bottom:8px;overflow-x:auto}
.toolbar>button,.toolbar .ratioGrid button{flex:0 0 auto;min-height:24px;padding:3px 7px;border-radius:6px;font-size:11px}
.toolbar .ratioGrid{display:flex;flex:0 0 auto;grid-template-columns:none;gap:6px;margin:0}
.skinCard.active{border-color:var(--blue);box-shadow:0 0 0 2px #bfdbfe}
.skinDrawer,.editor,.quickSave{margin-top:14px}.workspace.hidden~.quickSave{display:none}
@media(max-width:900px){.hero{align-items:flex-start;gap:6px}.privacy{max-width:100%}}
@media(max-width:620px){.app{padding:10px}.hero h1{font-size:23px}.toolbar span{display:inline}.toolbar .ratioGrid{grid-template-columns:none;gap:6px}}


/* Skin thumbnails: match the compact 96 x 88 px reference size. */
.recommendGrid,.skinGrid{display:grid;grid-template-columns:repeat(auto-fill,104px);gap:8px;justify-content:start}
.recommendGrid{margin:10px 0}
.skinCard{width:104px;min-height:0;padding:4px}
.skinThumb{width:96px;height:88px;aspect-ratio:auto;margin:0 0 4px;border-radius:7px}
.skinCard b{font-size:10px}.skinCard em{margin-top:3px;padding:2px 5px;font-size:9px}
@media(max-width:620px){.recommendGrid{display:flex;gap:8px}.recommendGrid .skinCard{flex:0 0 104px}.skinGrid{grid-template-columns:repeat(auto-fill,104px);gap:8px}.skinCard{width:104px}.skinThumb{width:96px;height:88px}}

/* 2026-08-26 mobile compact skins: prevent right clipping and keep the drawer short. */
@media(max-width:620px){
.controls .sectionHead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px}.controls .sectionHead h2{font-size:15px}.controls .sectionHead button{min-height:38px;padding:7px 9px;font-size:12px}
.recommendGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;overflow:visible}.recommendGrid .skinCard{width:auto;min-width:0;flex:none;padding:3px}.recommendGrid .skinThumb{width:100%;height:auto;aspect-ratio:12/11}
.skinDrawer{position:relative;max-height:none;overflow:visible}
.skinDrawer .sectionHead{position:sticky;top:-14px;z-index:3;margin:-4px -4px 4px;padding:4px;background:#fff}.skinDrawer .filterRow{gap:5px;padding-bottom:6px}.skinDrawer .filterRow button{min-height:34px;padding:6px 8px;font-size:10px}
.skinDrawer .skinGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;max-height:52vh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:12px}.skinDrawer .skinGrid::-webkit-scrollbar{display:none}.skinDrawer .skinCard{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:0;padding:2px;overflow:hidden}.skinDrawer .skinThumb{box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:auto;aspect-ratio:1/1;margin-bottom:2px;border-radius:5px}.skinDrawer .skinCard b{width:100%;font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.skinDrawer .skinCard em{display:none}
.skinScrollRail{display:none;position:absolute;z-index:5;right:3px;width:9px;border-radius:10px;background:#e5e7eb;touch-action:none}.skinScrollRail span{display:block;width:100%;min-height:30px;border:2px solid #e5e7eb;border-radius:10px;background:#666;cursor:grab;touch-action:none}.skinScrollRail span:active{cursor:grabbing;background:#444}.skinScrollRail.disabled{opacity:.35;pointer-events:none}
}

/* Remove recommendation/filter controls and show exactly two skin rows on mobile. */
#rerollBtn,.recommendGrid,.skinDrawer .filterRow{display:none!important}
@media(max-width:620px){.skinDrawer .skinGrid{height:218px!important;max-height:218px!important;grid-auto-rows:max-content!important;align-content:start!important}}

/* Visible outer preview-window boundary; keep the photo canvas itself unchanged. */
.previewColumn .canvasShell{border:2px solid #60a5fa!important;border-radius:4px!important;background:#eef6ff!important;cursor:grab;touch-action:none!important}.previewColumn .canvasShell:active{cursor:grabbing}.previewColumn .canvasShell canvas{outline:0!important;box-shadow:none!important;cursor:inherit;touch-action:none!important}
@media(max-width:620px){.previewColumn .canvasShell{width:max-content!important;max-width:100%!important;min-width:0!important;margin-left:auto!important;margin-right:auto!important;padding:8px!important}}
@media(max-width:620px){.workspace{gap:2px!important}.toolbar{margin-bottom:2px!important}.canvasHint{margin:0 0 2px!important;font-size:11px!important;line-height:1.2!important}.controls{margin-top:0!important}}
@media(max-width:620px){.editPane[data-pane="background"].active{grid-template-columns:minmax(0,1.7fr) minmax(105px,1fr)!important;gap:6px 10px!important;align-items:start!important}#bgType{grid-column:1/-1!important;grid-row:1!important}.gradientLabel{grid-column:1!important;grid-row:2!important}.gradientColorRow{grid-column:1!important;grid-row:3!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.gradientColorRow label{min-width:0!important}.patternField{grid-column:2!important;grid-row:2/4!important;align-self:start!important;gap:6px!important}.patternField select{width:100%!important}.editPane[data-pane="background"]>label:not(.patternField){grid-column:1/-1!important}}
@media(max-width:620px){.editorTabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;overflow:hidden!important;padding:4px 0 8px!important}.editorTabs button{width:100%!important;min-width:0!important;min-height:40px!important;padding:7px 2px!important;font-size:14px!important;white-space:nowrap!important}}
@media(max-width:620px){.editPane[data-pane="border"].active{grid-template-columns:minmax(0,1fr) 72px!important;gap:10px!important;align-items:end!important}.editPane[data-pane="border"] h3,.editPane[data-pane="border"]>label{grid-column:1/-1!important}.editPane[data-pane="border"]>label:nth-of-type(1){grid-column:1!important}.editPane[data-pane="border"]>label:nth-of-type(2){grid-column:2!important}.editPane[data-pane="border"] #borderColor{width:100%!important;min-height:44px!important}}
@media(max-width:620px){.editPane[data-pane="icon"] .iconGrid{height:244px!important;max-height:244px!important;overflow-x:hidden!important;overflow-y:scroll!important;align-content:start!important;grid-auto-rows:max-content!important;padding-right:7px!important;overscroll-behavior:contain!important;scrollbar-color:#64748b #e2e8f0!important;scrollbar-width:auto!important}.editPane[data-pane="icon"] .iconGrid::-webkit-scrollbar{width:10px!important}.editPane[data-pane="icon"] .iconGrid::-webkit-scrollbar-track{background:#e2e8f0!important;border-radius:10px!important}.editPane[data-pane="icon"] .iconGrid::-webkit-scrollbar-thumb{background:#64748b!important;border:2px solid #e2e8f0!important;border-radius:10px!important}}
@media(max-width:620px){#deleteIcon{grid-column:1/-1!important;justify-self:start!important;width:auto!important;min-height:32px!important;padding:4px 9px!important;font-size:13px!important;line-height:1.15!important;white-space:nowrap!important}.editPane[data-pane="effect"].active{grid-template-columns:auto minmax(0,1fr)!important;gap:8px 6px!important;align-items:center!important}.editPane[data-pane="effect"] h3{grid-column:1!important;white-space:nowrap!important}.editPane[data-pane="effect"] .shadowHelp{grid-column:2!important;align-self:center!important;white-space:nowrap!important}.editPane[data-pane="effect"]>button,.editPane[data-pane="effect"]>label{grid-column:1/-1!important}}
@media(max-width:620px){#textBold,#deleteText{width:100%!important;min-width:0!important;min-height:40px!important;padding:7px 4px!important;font-size:13px!important;line-height:1.15!important;white-space:nowrap!important}}
.editorTabs button{border-color:#29476d!important;background:#102947!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)!important}.editorTabs button.active{border-color:#3978ff!important;background:linear-gradient(135deg,#2f80ed 0%,#7c3aed 100%)!important;color:#fff!important;box-shadow:0 4px 12px rgba(79,70,229,.28)!important}