:root{
  --bg:#f7f5ff;--panel:#ffffff;--ink:#2d2940;--muted:#7a748f;--line:#e8e3f3;--accent:#8f7ee7;--accent2:#5fb7cf;
  --shadow:0 12px 35px rgba(65,52,104,.10);--radius:22px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Pretendard,"Noto Sans KR",system-ui,sans-serif;background:linear-gradient(135deg,#faf8ff,#f4fbff);color:var(--ink)}
button,input,select{font:inherit}
button{border:0;border-radius:12px;padding:10px 13px;cursor:pointer;transition:.18s transform,.18s box-shadow,.18s background}
button:hover{transform:translateY(-1px)}
button.primary{background:#8271dd;color:white;font-weight:800;box-shadow:0 7px 18px rgba(130,113,221,.25)}
button.secondary{background:#61bfd5;color:white;font-weight:800;box-shadow:0 7px 18px rgba(97,191,213,.22)}
button.ghost{background:white;border:1px solid var(--line);color:var(--ink)}
button.wide{width:100%;margin-top:10px}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.app-shell{min-height:100vh;padding:18px}
.topbar{max-width:1840px;margin:0 auto 14px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.eyebrow{font-size:11px;letter-spacing:.16em;color:#8f85a8;font-weight:800}
.topbar h1{margin:5px 0 0;font-size:24px}
.topbar h1 span{font-size:12px;color:#9b91b3;background:#eee9fb;padding:4px 8px;border-radius:999px;vertical-align:middle}
.subtitle{margin:6px 0 0;font-size:12px;color:var(--muted)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.workspace{max-width:1840px;margin:auto;display:grid;grid-template-columns:360px minmax(520px,1fr) 390px;gap:14px;align-items:stretch}
.panel{background:rgba(255,255,255,.92);border:1px solid rgba(230,225,241,.9);border-radius:var(--radius);box-shadow:var(--shadow);min-height:0}
.pattern-panel,.control-panel{height:calc(100vh - 100px);overflow:hidden}
.preview-panel{height:calc(100vh - 100px);display:flex;flex-direction:column;overflow:hidden}
.panel-head{padding:18px 18px 10px;display:flex;gap:10px;align-items:end;justify-content:space-between}
.panel-head h2,.control-section h2,.mini-section h3{font-size:15px;margin:0}
.panel-head p{margin:3px 0 0;font-size:11px;color:var(--muted)}
input[type=search],select,input[type=number],input[type=text]{border:1px solid var(--line);background:#fbfaff;border-radius:10px;padding:9px 10px;color:var(--ink);outline:none;width:100%}
input[type=search]{width:160px}
input[type=range]{width:100%;accent-color:#8977df}
.tabs{display:flex;gap:6px;padding:5px 14px 10px;overflow:auto}
.tab{white-space:nowrap;padding:7px 9px;border-radius:999px;border:1px solid var(--line);background:#faf9fd;font-size:11px}
.tab.active{background:#e9e2ff;border-color:#d7ccff;color:#6754c7;font-weight:800}
.layer-tabs{display:flex;gap:6px;flex-wrap:wrap}
.layer-tab{padding:8px 10px;border:1px solid var(--line);background:#faf9fd;border-radius:999px;font-size:11px}
.layer-tab.active{background:#e9e2ff;border-color:#d7ccff;color:#6754c7;font-weight:800}
.mini-section{padding:0 16px 12px;border-bottom:1px solid var(--line)}
.no-border{border-bottom:0;padding-bottom:8px}
.inline-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.small-gap{gap:12px}.mini-copy{font-size:11px}.muted{color:var(--muted)}
.pattern-list{height:calc(100% - 280px);overflow:auto;padding:4px 12px 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.pattern-card{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;padding:7px;text-align:left}
.pattern-card.active{border-color:#9b87f0;box-shadow:0 0 0 2px rgba(155,135,240,.16)}
.pattern-card canvas{width:100%;aspect-ratio:1;border-radius:9px;display:block;background:#f8f7fb}
.pattern-card strong{display:block;font-size:11px;margin:6px 2px 1px;padding-right:26px}
.pattern-card small{font-size:9px;color:var(--muted);margin:0 2px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pattern-fav{position:absolute;right:8px;top:8px;padding:5px 6px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:12px}
.pattern-fav.on{background:#fff3b2;border-color:#f0d46b}
.asset-section{border-top:1px solid var(--line);padding-top:14px}
.asset-dropzone{width:100%;border:1.5px dashed #d9cfff;background:linear-gradient(180deg,#fcfbff,#f7f4ff);border-radius:16px;padding:14px 12px;text-align:center;color:#5e5676;display:grid;gap:6px;margin-bottom:10px}.asset-dropzone strong{font-size:11px}.asset-dropzone span{font-size:10px;color:var(--muted)}.asset-dropzone.dragover{background:#f0ebff;border-color:#9b87f0}
.asset-list{display:grid;gap:8px;max-height:280px;overflow:auto;padding-right:2px}
.asset-card{display:grid;grid-template-columns:54px 1fr auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:8px;background:#fff}
.asset-thumb{width:54px;height:54px;border-radius:10px;border:1px solid var(--line);background:#faf9fd;object-fit:contain}
.asset-thumb.fallback{display:flex;align-items:center;justify-content:center;font-size:20px;color:#8b82a3}
.asset-meta strong{display:block;font-size:11px}.asset-meta small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.asset-actions{display:flex;flex-direction:column;gap:6px}
.asset-actions button{padding:7px 9px;font-size:10px}
.preview-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.selected-copy{min-width:0;display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center}.selected-copy strong{font-size:15px}.selected-copy small{grid-column:1/-1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:650px}.pill{font-size:10px;background:#f0ebff;color:#7160c8;padding:4px 7px;border-radius:999px}.zoom-box{display:flex;align-items:center;gap:6px;border:1px solid var(--line);padding:4px;border-radius:10px}.zoom-box button{padding:4px 8px;background:#f8f7fb}.zoom-box span{font-size:11px;min-width:42px;text-align:center}
.canvas-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:26px;background-image:linear-gradient(45deg,#f8f7fb 25%,transparent 25%),linear-gradient(-45deg,#f8f7fb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f8f7fb 75%),linear-gradient(-45deg,transparent 75%,#f8f7fb 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.canvas-stage canvas{display:block;width:min(72vh,78vw);height:auto;max-width:100%;border-radius:14px;box-shadow:0 18px 50px rgba(37,31,66,.18);background:white}.preview-note{padding:10px 18px 14px;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}
.control-scroll{height:100%;overflow:auto;padding:4px 16px 20px}.control-section{padding:15px 0;border-bottom:1px solid var(--line)}.control-section:last-child{border-bottom:0}.section-title-row{display:flex;align-items:start;justify-content:space-between;gap:8px;margin-bottom:10px}.mini-btn{font-size:10px;padding:6px 8px;border:1px solid var(--line);background:#faf9fd}.control-section>label{display:block;font-size:11px;color:#5f5872;margin:11px 0}.control-section label span{float:right;color:#8c83a0}.switch-row{display:flex!important;gap:8px;align-items:center;color:var(--ink)!important}.switch-row.compact{font-size:11px}.switch-row input{accent-color:#8977df}
.color-grid{display:grid;gap:8px}.color-grid.compact-grid{grid-template-columns:1fr 1fr}.color-row{display:grid;grid-template-columns:28px 1fr 34px;gap:7px;align-items:center}.color-row input[type=color]{width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:white}.color-row input[type=text]{width:100%;padding:7px 8px;font-size:11px;text-transform:uppercase}.dropper{padding:7px;background:#f8f6ff;border:1px solid var(--line);font-size:13px}.color-label{grid-column:1/-1;font-size:10px;color:var(--muted);margin-bottom:-5px}
.layer-summary{display:grid;gap:8px;margin-bottom:10px}.layer-chip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:#fff}.layer-chip.active{border-color:#9b87f0;box-shadow:0 0 0 2px rgba(155,135,240,.12)}.layer-chip strong{font-size:11px}.layer-chip small{font-size:10px;color:var(--muted)}.layer-chip .bullet{width:10px;height:10px;border-radius:50%;background:#9b87f0}.layer-editor-card{border:1px solid var(--line);border-radius:16px;background:#fbfaff;padding:12px}.layer-editor-grid{display:grid;gap:10px}.control-subtitle{font-size:11px;color:var(--muted);margin:-4px 0 6px}.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.selectish{display:block;padding:8px 10px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:11px}
.source-type-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.source-type-row button.active{background:#e9e2ff;border-color:#d7ccff;color:#6754c7;font-weight:800}
.palette-box{display:grid;gap:8px}
.palette-presets,.extracted-palette,.chip-list{display:flex;gap:7px;flex-wrap:wrap}.palette-chip{padding:0;height:28px;border:1px solid var(--line);overflow:hidden;display:flex;background:white;border-radius:10px}.palette-chip i{display:block;flex:1;height:100%;width:16px}
.reference-preview{border:1px dashed var(--line);border-radius:14px;padding:10px;min-height:90px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fbfaff;color:var(--muted);font-size:11px}.reference-preview img{max-width:100%;max-height:140px;border-radius:10px;object-fit:contain}.reference-preview.empty{padding:18px}
.swatch-pack{border:1px solid var(--line);border-radius:14px;padding:8px;background:#fff;display:grid;gap:8px;width:100%}.swatch-row{display:flex;gap:6px;flex-wrap:wrap}.swatch{width:28px;height:28px;border-radius:8px;border:1px solid rgba(0,0,0,.08)}
.saved-preset-list{display:grid;gap:8px}.preset-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:10px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.preset-card strong{font-size:11px;display:block}.preset-card small{font-size:10px;color:var(--muted);display:block;margin-top:2px}.preset-actions{display:flex;gap:6px}.preset-actions button{padding:7px 9px;font-size:10px}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;background:#fbfaff;border:1px solid var(--line);border-radius:999px;font-size:10px}
.export-grid,.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.export-grid label,.tile-grid label{font-size:10px;color:var(--muted)}.export-grid input,.tile-grid input{width:100%;margin-top:4px}
.info-box{background:#faf8ff;border:1px solid #eee8ff!important;border-radius:14px;padding:12px!important;margin-top:14px}.info-box h3{margin:0 0 5px;font-size:12px}.info-box p{margin:4px 0;font-size:10px;line-height:1.55;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#2f2a40;color:white;padding:10px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;font-size:12px;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
.micro-copy{font-size:10px;color:var(--muted);margin:3px 0 0}.hidden{display:none}
@media(max-width:1380px){.workspace{grid-template-columns:320px minmax(420px,1fr) 360px}.pattern-list{grid-template-columns:1fr}}
@media(max-width:1060px){.workspace{display:block}.pattern-panel,.preview-panel,.control-panel{height:auto;margin-bottom:12px}.pattern-list{height:auto;max-height:420px;grid-template-columns:repeat(2,1fr)}.preview-panel{min-height:720px}.control-scroll{height:auto}.topbar{display:block}.top-actions{justify-content:flex-start;margin-top:10px}}