@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--ink:#453b32;--green:#796044;--line:#dcd5ca;--paper:#f6f3ec;--soft:#eee8dd;--muted:#887f72}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:13px 'Noto Sans KR',sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:hover{background-color:#e8e0d3}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #a07648;outline-offset:3px}header{height:83px;max-width:1460px;margin:auto;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:19px;font-weight:700;letter-spacing:-.8px;text-decoration:none}.logo>span{color:#745335}.acorn{width:29px;height:33px;vertical-align:middle}.quiet{border:0;background:transparent;padding:8px 0;font-size:11px;color:#746b5f}.quiet:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}main{max-width:1460px;margin:auto;padding:0 4.5%}.intro{margin:30px 0 28px}.eyebrow{font-size:10px;color:#9b8162;margin:0 0 7px;letter-spacing:1px}h1{font-size:30px;font-weight:600;letter-spacing:-1.4px;margin:0 0 8px}.intro p:last-child{font-size:12px;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:294px minmax(0,1fr);gap:38px;align-items:start}aside{border-top:2px solid var(--ink);background:transparent}.tabs{display:flex;margin:0;border-bottom:1px solid var(--line);gap:23px}.tabs button{flex:1;padding:16px 0 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:#968b7d;font-size:12px;margin-bottom:-1px}.tabs button.active{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}.tabs span{font-size:9px;margin-left:5px;font-weight:400;color:#9c8e7c}.controls section{padding:22px 0;border-bottom:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;margin-bottom:16px}.section-heading h2{margin:0;font-size:12px;font-weight:700}.shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.shapes button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 3px 9px;border:1px solid transparent;background:transparent;border-radius:3px;font-size:10px;color:#928371}.shapes button:hover{background:var(--soft)}.shapes button.active{border-color:#b29a7b;background:#eee6d9;color:#624b31}.shapes svg{width:22px;height:22px;fill:currentColor;color:#796044}.range-label{display:flex;align-items:center;justify-content:space-between;color:#796f62;font-size:11px;margin:16px 0 9px}.number-wrap{display:flex;align-items:center;gap:5px;color:#7a6b58;font-size:10px}.number-wrap>span{min-width:14px}input[type=number]{width:62px;padding:4px 5px;text-align:right;border:0;border-bottom:1px solid #c8bcaa;background:transparent;color:var(--ink);font:12px monospace;border-radius:0}input[type=range]{width:100%;accent-color:#8c6d49;height:3px;display:block;margin:11px 0 21px}.segmented{display:flex;border:1px solid #cfc3b2;border-radius:3px;overflow:hidden}.segmented button{flex:1;padding:9px 2px;border:0;border-right:1px solid #cfc3b2;background:transparent;font-size:10px;color:#8c7f6e}.segmented button:last-child{border-right:0}.segmented .active{background:#e3d7c5;color:#57432c;font-weight:600}#offsetControl{margin-top:20px}.hint{font-size:10px;color:#a09688;line-height:1.7;margin-bottom:0}.colors{display:flex;gap:23px}.colors label{display:flex;gap:9px;align-items:center;font-size:11px}.colors small{display:block;margin-top:4px;font:10px monospace;color:#9b8d7d}input[type=color]{width:33px;height:35px;padding:0;background:transparent;border:0;cursor:pointer}.palettes{display:flex;align-items:center;gap:10px;margin-top:23px}.palettes button{width:23px;height:23px;border:0;border-radius:3px;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);outline:1px solid #00000012;outline-offset:2px}.palettes button:hover{transform:translateY(-2px)}.palettes>span{margin-left:auto;font-size:9px;color:#a29481}.preview{min-width:0}.preview-head{display:flex;justify-content:space-between;align-items:center;height:37px;margin-bottom:15px;font-size:11px;color:#897b67}.canvas-area{position:relative;border-radius:2px;overflow:hidden;background:#ede6db;box-shadow:0 0 0 1px #00000005,0 5px 12px #4c382508}.canvas-area canvas{display:block;width:100%;aspect-ratio:1;object-fit:contain}.canvas-area #empty{position:absolute;inset:0;align-content:center;text-align:center;font-size:12px;color:#95846c;background:#f2ede3}.preview-bottom{display:flex;align-items:center;justify-content:space-between;padding:17px 0 24px;color:#8a7d6b;font-size:10px}.preview-bottom b{font-weight:400;color:#a39582}.preview-bottom small{font-size:10px;margin-left:13px}.size-badge{font:10px monospace;color:#948774}.export{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:23px}.export h3{font-size:12px;margin:0 0 7px;font-weight:600}.export p{font-size:10px;color:#9d8f7b;margin:0}.download-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}select{padding:12px 9px;background:transparent;border:1px solid #cfc4b2;color:#77634b;border-radius:3px;font-size:10px;max-width:100%}.export button{border:1px solid #765537;background:#765537;color:#fffaf0;padding:13px 17px;border-radius:3px;font-size:11px;white-space:nowrap}.export button:hover{background:#5f422a}.export button span{margin-left:16px}#status{min-height:17px;font-size:10px;color:#907956}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:37px;padding:21px 0 27px;color:#a59884;font-size:9px}footer>span:first-child{color:#8c7b62}.upload{display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;border:1px dashed #c8bba7;border-radius:3px;padding:20px 5px;color:#9f8869;font-size:23px}.upload:hover{background:var(--soft)}.upload b{font-size:11px;font-weight:400;margin:10px 0}.upload small{font-size:8px;color:#a89b88}#thumbs{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}#thumbs>div{position:relative}#thumbs img{width:46px;height:46px;object-fit:contain;background:#ece4d7;border-radius:2px}#thumbs button{position:absolute;top:-6px;right:-6px;width:17px;height:17px;padding:0;border:0;border-radius:50%;background:#796044;color:white;font-size:11px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(min-width:1400px){.workspace{gap:50px;grid-template-columns:310px minmax(0,1fr)}}@media(max-width:1050px){.workspace{grid-template-columns:270px minmax(0,1fr);gap:25px}.export{align-items:flex-start;flex-direction:column}.download-actions{justify-content:flex-start}.preview-bottom small{display:block;margin:6px 0 0}.size-badge{white-space:nowrap}}@media(max-width:680px){header{height:66px}.logo{font-size:16px}.acorn{width:23px;height:28px}.intro{margin:23px 0}h1{font-size:26px}.intro p:last-child{font-size:11px}.workspace{display:flex;flex-direction:column;gap:24px}.workspace aside,.preview{width:100%}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.controls section:first-child,.controls section:nth-child(2){grid-column:1/-1}.controls section:last-child{grid-column:1/-1}.shapes{grid-template-columns:repeat(8,1fr);gap:2px}.shapes button{font-size:9px;padding:12px 0 9px}.shapes svg{width:19px;height:19px}.tabs{gap:0}.preview-head{margin-bottom:8px}.download-actions{width:100%}.download-actions select{flex:1}.export{width:100%}footer{font-size:8px;gap:15px}.preview-bottom{padding-bottom:20px}}

/* White editor */
:root{--ink:#252525;--green:#373737;--line:#e8e8e8;--paper:#fff;--soft:#f6f6f6;--muted:#858585}
body{background:#fff;color:#252525}header{max-width:none;height:72px;padding:0 32px;background:#fff;border-color:#ededed}.logo{font-size:18px;letter-spacing:-.6px}.logo>span{color:#555}.quiet{color:#777}.quiet:hover{color:#222;text-decoration:none;background:#f5f5f5;border-radius:7px;padding-left:8px;padding-right:8px}main{max-width:1500px;padding:0 32px}.intro{margin:27px 0 25px}h1{font-size:25px;font-weight:600;letter-spacing:-1px}.intro p:last-child{color:#888;font-size:12px}.workspace{grid-template-columns:310px minmax(0,1fr);gap:28px}aside{border:0;background:transparent}.tabs{gap:4px;background:#f5f5f5;border:1px solid #ededed;border-radius:12px;padding:5px;margin:0 0 14px}.tabs button{border:0;margin:0;padding:11px 0;border-radius:8px;color:#888}.tabs button.active{background:#fff;color:#222;box-shadow:0 1px 4px #00000009}.tabs span{color:#999}.controls{display:flex;flex-direction:column;gap:12px}.controls section{border:1px solid #e9e9e9;background:#fff;border-radius:14px;padding:20px}.section-heading h2{font-size:12px}.shapes{gap:5px}.shapes button{padding:12px 2px 8px;color:#888;border:1px solid #eee;border-radius:9px}.shapes button.active{background:#f4f4f4;border-color:#777;color:#222}.shapes button:hover{background:#f5f5f5}.shapes svg{color:#555}.range-label{color:#666}.number-wrap{color:#888}input[type=number]{background:#fafafa;border:1px solid #e6e6e6;border-radius:6px;color:#333;padding:5px}input[type=range]{accent-color:#555}.segmented{border-color:#e4e4e4;border-radius:7px}.segmented button{border-color:#e4e4e4;color:#888}.segmented .active{background:#f0f0f0;color:#222}.hint{color:#999}.colors small{color:#999}.palettes button{border-radius:50%}.palettes>span{color:#999}.preview-head{color:#555;margin-bottom:12px;height:35px}.preview-formats{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}.preview-formats button{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e4e4e4;border-radius:9px;padding:10px 14px;font-size:11px;color:#777}.preview-formats button[aria-pressed=true]{color:#222;border-color:#555;background:#f5f5f5;font-weight:600}.preview-formats button:hover{background:#f7f7f7}.preview-formats small{font-size:9px;color:#aaa;font-weight:400}.ratio-icon{display:inline-block;border:1.4px solid currentColor;border-radius:2px;width:13px;height:13px}.ratio-icon.portrait{width:11px;height:14px}.ratio-icon.wide{width:17px;height:10px}.canvas-area{background:#f7f7f7;border-radius:8px;box-shadow:0 0 0 1px #00000008,0 4px 18px #00000005}.canvas-area #empty{background:#fafafa;color:#999}.preview-bottom{color:#888;padding:17px 0 23px}.preview-bottom b{color:#999}.size-badge{color:#999}.export{border-color:#ededed;padding-top:21px;flex-wrap:wrap}.export p{color:#999}.download-actions select{border-color:#ddd;border-radius:8px;color:#555;background:#fff}.export button{background:#292929;border-color:#292929;border-radius:8px;color:#fff;padding:13px 19px}.export button:hover{background:#444}#status{color:#888}.upload{border-color:#d8d8d8;border-radius:9px;color:#888}.upload small{color:#aaa}.upload:hover{background:#fafafa}#thumbs img{background:#f5f5f5;border-radius:7px}#thumbs button{background:#555}footer{border-color:#ededed;color:#aaa}footer>span:first-child{color:#888}
@media(min-width:1400px){.workspace{gap:38px;grid-template-columns:320px minmax(0,1fr)}}@media(max-width:1050px){.workspace{grid-template-columns:290px minmax(0,1fr);gap:22px}.controls section{padding:17px}.preview-formats button{padding:9px 11px}.preview-formats{gap:6px}.preview-formats small{display:none}}@media(max-width:680px){header{padding:0 20px;height:64px}main{padding:0 20px}.workspace{gap:21px}.controls{display:flex;gap:12px}.controls section{padding:18px}.shapes{grid-template-columns:repeat(4,1fr);gap:8px}.shapes button{padding:12px 3px}.intro{margin:24px 0}.preview-formats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.preview-formats button{justify-content:center;padding:11px 5px}.preview-formats small{display:none}.preview-head{margin-bottom:10px}.export{gap:15px}}

.harmony-box{margin-top:20px;padding-top:17px;border-top:1px solid #eee}.base-color{display:flex;align-items:center;justify-content:space-between;color:#666;font-size:11px}.harmony-tabs{display:flex;gap:6px;margin-top:12px}.harmony-tabs button{flex:1;padding:8px;border:1px solid #e5e5e5;border-radius:7px;background:white;font-size:11px;color:#888}.harmony-tabs button[aria-pressed=true]{border-color:#666;background:#f5f5f5;color:#222}.pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}.pair-grid button,.curated-palettes button{border:1px solid #ededed;background:#fff;border-radius:8px;padding:5px;display:flex;flex-direction:column;gap:5px;color:#777;font-size:9px;outline:none;width:auto;height:auto}.pair-grid button:hover,.curated-palettes button:hover{border-color:#999;transform:none}.pair-grid button:focus-visible,.curated-palettes button:focus-visible{outline:2px solid #777;outline-offset:2px}.pair-swatches{display:flex!important;width:100%;height:27px;overflow:hidden;border-radius:4px;margin:0!important}.pair-swatches i{flex:1}.palette-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:23px}.palette-heading button{border:0;background:transparent;color:#888;font-size:9px;padding:5px}.palette-filters{display:flex;gap:5px;flex-wrap:wrap;margin:11px 0}.palette-filters button{border:1px solid #eee;background:#fff;color:#888;border-radius:5px;font-size:9px;padding:5px 6px}.palette-filters button[aria-pressed=true]{background:#f0f0f0;border-color:#aaa;color:#222}.curated-palettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0}.curated-palettes button{background:#fff;outline:none}.curated-palettes button>span:last-child{font-size:9px;color:#777;margin:0}.palette-credit{font-size:8px;color:#aaa;line-height:1.8;margin:14px 0 0}.palette-credit a{color:#999;text-underline-offset:2px}.logo{cursor:default}

.section-heading #swapColors{border:0;background:transparent;color:#888;font-size:10px;padding:3px 0;cursor:pointer}.section-heading #swapColors:hover{color:#222}