@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--bg:#f5f5f1;--surface:#fff;--text:#222c27;--muted:#7a827b;--line:#e4e7df;--soft:#f1f3ed;--accent:#426650;--accent-hover:#31533e;--stage:#eef0e9}
:root[data-theme=dark]{color-scheme:dark;--bg:#131a16;--surface:#1d2720;--text:#edf1e8;--muted:#a5b2a7;--line:#344338;--soft:#28372d;--accent:#527d60;--accent-hover:#649470;--stage:#17201a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans','Noto Sans KR',sans-serif;font-size:14px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9ba985;outline-offset:3px}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}header{height:88px;max-width:1320px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:800;letter-spacing:2px}.brand-icon{font-size:37px;color:var(--accent)}.brand-note{border-left:1px solid var(--line);padding-left:16px;margin-left:10px;font-size:9px;letter-spacing:2px;color:var(--muted);font-weight:500}main{max-width:1240px;margin:auto;padding:0 32px}.intro{text-align:center;padding:56px 0 38px}.eyebrow{font-size:10px;letter-spacing:2.6px;color:var(--accent);font-weight:700;display:flex;justify-content:center;align-items:center;gap:9px}.eyebrow span{width:6px;height:6px;background:#83a37d;border-radius:50%}h1{font-size:46px;line-height:1.35;letter-spacing:-2.5px;margin:20px 0 15px;font-weight:700}h1 em{font-style:normal;color:#6b8965}.intro p{font-size:13px;color:var(--muted);line-height:1.9;margin:0}.studio{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}.workspace,.settings{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}.workspace{padding:0 22px 15px}.panel-heading{height:68px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;gap:10px}.panel-heading b{font-size:10px;letter-spacing:1px;color:#8a9c82;margin-right:9px}.panel-heading>span:last-child:not(:first-child){font-size:10px;color:var(--muted);font-weight:400;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:52%}.dropzone{min-height:474px;background:var(--stage);border:1.5px dashed #c8d0bf;border-radius:13px;display:flex;align-items:center;justify-content:center;position:relative;padding:24px}.dropzone.dragging{border-color:var(--accent);background:var(--soft);box-shadow:inset 0 0 0 3px var(--accent)}#empty-state{text-align:center}.upload-art{height:90px;width:75px;border:2px solid #aab99f;border-radius:10px;transform:rotate(-8deg);margin:0 auto 30px;position:relative;background:var(--surface)}.art-sun{position:absolute;top:17px;right:15px;width:12px;height:12px;border-radius:50%;background:#bbc9a9}.art-mountain{position:absolute;bottom:14px;left:10px;width:50px;height:30px;background:#b0c0a4;clip-path:polygon(0 100%,35% 10%,60% 65%,78% 35%,100% 100%)}.art-plus{position:absolute;bottom:-11px;right:-15px;border-radius:50%;background:var(--accent);color:white;font-size:24px;width:32px;height:32px;transform:rotate(8deg);line-height:32px}h2{font-size:19px;letter-spacing:-.8px;margin:0 0 12px}#empty-state p{font-size:12px;color:var(--muted);margin-bottom:24px}small{display:block;font-size:10px;color:var(--muted);margin:17px 0}.primary{background:var(--accent);color:white;border-radius:9px;padding:14px 24px;font-size:12px;font-weight:600}.primary:hover:not(:disabled){background:var(--accent-hover)}.primary span{margin-left:24px}.quiet{border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:9px 13px;font-size:11px}.text-button{background:none;color:var(--muted);font-size:11px;padding:6px 0}.text-button:hover{color:var(--text)}.workspace-footer{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:10px;font-size:10px;color:var(--muted)}.status{font-size:11px;line-height:1.7;color:var(--muted);margin:4px 0;min-height:20px}.settings>.panel-heading{padding:0 22px;border-bottom:1px solid var(--line)}.settings-body{padding:20px 22px}.segmented{display:flex;border-radius:9px;background:var(--soft);padding:4px;margin-bottom:22px}.segmented button{flex:1;padding:10px 4px;border-radius:6px;background:transparent;color:var(--muted);font-size:12px}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 5px #00000009;font-weight:700}label{display:block;font-size:11px;font-weight:600;margin-bottom:9px}select,input[type=number]{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;padding:10px;font-size:12px}select{padding-right:22px}.resolution{display:flex;align-items:end;gap:10px;margin-top:16px}.resolution>div{flex:1;min-width:0}.resolution>span{padding-bottom:12px;color:var(--muted);font-size:10px}.resolution label{color:var(--muted);font-size:10px}.divider{border-top:1px solid var(--line);margin:22px 0}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.row label{margin:10px 0}.row output{font-size:10px;color:var(--muted)}.row select{width:83px}fieldset{padding:0;margin:15px 0 0;border:0;min-width:0}input[type=range]{width:100%;accent-color:var(--accent);height:14px;margin:4px 0 12px}.full{width:100%;margin-top:10px}.check{display:flex;align-items:center;gap:7px;margin-top:18px;font-size:11px;color:var(--muted)}input[type=checkbox]{accent-color:var(--accent)}.note{font-size:10px;line-height:1.6;color:var(--muted);margin:6px 0}.center{text-align:center}.error{font-size:11px;color:#cc5448;line-height:1.5}#preview-wrap{position:relative;max-width:100%;line-height:0}canvas{display:block;max-width:100%;border-radius:8px;touch-action:none;cursor:grab;box-shadow:0 12px 32px #0002}canvas:active{cursor:grabbing}#clock{position:absolute;pointer-events:none;top:8%;width:100%;text-align:center;color:white;text-shadow:0 2px 12px #0005;line-height:1.4}#clock span{font-size:11px}#clock strong{display:block;font-size:clamp(28px,5vw,56px);letter-spacing:-2px}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:48px 20px}.benefits>div{position:relative;padding-left:38px}.benefits>div>span{position:absolute;left:0;top:0;font-size:23px;color:#8a9b7c}.benefits h3{font-size:12px;margin:2px 0 9px}.benefits p{font-size:11px;line-height:1.9;color:var(--muted);margin:0}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:24px 0 30px;font-size:9px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:850px){.studio{grid-template-columns:minmax(0,1fr) 300px}.workspace{padding:0 14px 14px}.dropzone{padding:14px}.brand-note{display:none}h1{font-size:38px}.benefits{gap:18px;padding:35px 0}}
@media(max-width:680px){header{height:70px;padding:0 20px}main{padding:0 16px}.intro{padding:36px 0 30px}h1{font-size:34px}.studio{grid-template-columns:1fr}.dropzone{min-height:370px}.benefits{grid-template-columns:1fr;gap:25px;padding:35px 10px}footer{flex-direction:column;gap:8px}.settings-body{padding:20px}.panel-heading>span:last-child:not(:first-child){max-width:45%}}