:root{font-family:DM Sans,Noto Sans KR,sans-serif;color:#29322e;background:#f6f5f1;font-synthesis:none;font-size:13px;--border: #e0e2da;--muted: #92978e;--accent: #e45e3b;--paper: #fdfdf9;--green: #38564a}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}button,summary{cursor:pointer}button{border:0;background:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:6px;padding:7px;transition:background .15s,color .15s}button:hover{background:#e8ebe3}button:disabled{opacity:.3;cursor:not-allowed}button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.active{background:#f8e9e0;color:#c64c2c}button svg{flex-shrink:0}input,select{border:1px solid var(--border);border-radius:5px;background:#fffefb;padding:8px}input[type=range]{accent-color:var(--green);padding:0;height:4px;cursor:pointer;border:0}input[type=checkbox]{accent-color:var(--green)}select{cursor:pointer}input[type=color]{padding:0;border:0;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}input[type=color]::-moz-color-swatch{border:0;border-radius:4px}[hidden]{display:none!important}hr{border:0;border-top:1px solid var(--border);margin:6px 0}#app{height:100dvh;min-height:570px;display:flex;flex-direction:column}.topbar{height:70px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--border);background:var(--paper);gap:24px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}.brand-mark{width:35px;height:35px;display:grid;place-items:center;background:var(--accent);color:#fff8e9;border-radius:9px}.brand h1{margin:0;font-size:29px;font-weight:700;letter-spacing:-1.6px}.brand h1>span{color:var(--accent)}.document-name{display:flex;align-items:center;gap:9px;margin-left:10px}.document-name input{border-color:transparent;background:transparent;text-align:center;width:210px;font-size:12px;padding:6px}.document-name input:hover{border-color:var(--border)}.save-dot{width:5px;height:5px;border-radius:50%;background:#8eaa88}.header-actions{display:flex;align-items:center;gap:15px}.primary{background:var(--accent);color:#fff;padding:10px 17px;font-size:12px;font-weight:600;border:1px solid var(--accent)}.primary:hover{background:#cf502f;color:#fff}.secondary{border:1px solid var(--border);padding:10px 17px}.menubar{height:39px;display:flex;flex-shrink:0;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--border);background:var(--paper)}.menus{display:flex;align-items:stretch;gap:24px}.menu{position:relative;display:flex;align-content:center}.menu summary{font-size:11px;list-style:none;display:flex;align-items:center;height:100%;-webkit-user-select:none;user-select:none}.menu summary::-webkit-details-marker{display:none}.menu[open]>summary{color:var(--accent)}.dropdown{position:absolute;top:34px;left:-9px;z-index:40;background:#fffefb;box-shadow:0 10px 35px #26332d24;border:1px solid var(--border);border-radius:8px;min-width:250px;padding:7px}.dropdown button{display:flex;justify-content:space-between;width:100%;padding:9px 10px;text-align:left;font-size:12px}.dropdown kbd{color:#959c90;font-family:inherit;font-size:10px}.menu-help{font-size:11px;padding:0}.history-controls{display:flex;align-items:center;gap:4px}.history-controls button{padding:6px}.history-controls svg{width:15px;height:15px}.history-controls>span:first-of-type{height:12px;border-left:1px solid var(--border);margin:0 10px}#save-state{font-size:10px;color:#8d9588;min-width:137px}.ribbon{display:flex;align-items:stretch;gap:0;min-height:101px;padding:13px 19px 9px;border-bottom:1px solid var(--border);background:#fafaf6;overflow-x:auto;flex-shrink:0}.ribbon-group{padding:0 18px;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px}.ribbon-group:first-child{padding-left:6px}.ribbon-group:last-child{border:0}.group-label{font-size:9px;letter-spacing:.2px;color:#8a9186;line-height:1}.ribbon-items{display:flex;align-items:center;gap:3px;height:43px}.ribbon-items button{padding:7px}.ribbon-items svg{width:19px}.brush-selector{display:flex;align-items:center;gap:9px;height:42px}.brush-selector select{border:0;background:transparent;font-size:11px;width:114px;padding:4px}.brush-selector>svg{color:#566c58}.shape-picker{display:grid;grid-template-columns:repeat(13,22px);grid-template-rows:repeat(2,23px);gap:0 1px}.shape-picker button{padding:3px;border-radius:3px}.fill-group label{font-size:9px;color:#89917f;display:flex;flex-direction:column;gap:4px}.fill-group select{padding:3px 5px;font-size:10px;min-width:111px}.color-controls{display:flex;align-items:center;gap:12px}.color-pair{position:relative;width:51px;height:46px;flex-shrink:0}.color-pair label{display:block;position:absolute;border:1px solid #d4d8ce;border-radius:5px;padding:3px;background:#fdfdf9}.primary-color{left:0;top:0;z-index:1}.secondary-color{left:18px;top:15px}.color-pair input{display:block;width:26px;height:26px}.palette{display:grid;grid-template-columns:repeat(12,17px);gap:5px 5px}.palette button{height:17px;width:17px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #27332913;padding:0}.palette button:hover{outline:2px solid #c5cec0;outline-offset:2px}.color-controls>button{padding:3px}.color-controls>button svg{width:15px;color:#a2a899}.color-group .muted{font-size:8px;margin-left:7px;color:#a7ac9f}.editor{display:flex;flex:1;min-height:0}.toolrail{width:65px;background:#fbfbf7;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:15px 0 10px;gap:7px;flex-shrink:0;overflow-y:auto}.toolrail>button{width:39px;height:37px;min-height:37px;border-radius:7px;position:relative;color:#687366}.toolrail>button.active{background:#f8e5d9;color:#d35a37}.toolrail>button.active:before{content:"";position:absolute;left:-13px;width:3px;height:17px;background:var(--accent);border-radius:0 3px 3px 0}.toolrail button>span{display:none}.rail-spacer{flex:1;min-height:10px}.workarea{flex:1;min-width:0;display:flex;flex-direction:column;background:#eceee7}#workspace{flex:1;min-height:0;overflow:auto;position:relative;padding:0;display:flex;align-items:flex-start;justify-content:flex-start;background-image:radial-gradient(#bfc6b440 .7px,transparent .7px);background-size:12px 12px;outline:none}#workspace.dragover{box-shadow:inset 0 0 0 3px var(--accent)}#canvas-wrap{position:relative;flex-shrink:0;background:repeating-conic-gradient(#ecece7 0% 25%,#fff 0% 50%) 50% / 16px 16px;box-shadow:0 4px 8px #303d3010,0 16px 40px #303d3012;line-height:0}#paint-canvas{display:block;touch-action:none;cursor:crosshair;image-rendering:auto}#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#text-editor{position:absolute;z-index:5;min-height:65px;line-height:1.25;border:1px dashed var(--accent);background:#ffffffd9;padding:0;resize:both;overflow:auto;outline:0}#ruler-x{position:absolute;left:0;top:-20px;pointer-events:none}#ruler-y{position:absolute;top:0;left:-20px;pointer-events:none}.canvas-footnote{display:flex;justify-content:space-between;gap:12px;flex-shrink:0;padding:20px 29px 22px;font-size:9px;color:#98a08f}.keycap{padding:2px 5px;border:1px solid #d9dfd1;border-radius:3px;font-size:8px;margin-right:3px}.inspector{width:253px;flex-shrink:0;background:#fafaf6;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}.inspector-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 19px 15px;font-size:11px;font-weight:600}.inspector-heading>span{display:flex;align-items:center;gap:7px}.inspector-heading>span:last-child:not(:first-child){font-size:9px;font-weight:400;color:#88917f}.properties{padding:0 19px 19px}#brush-preview{background:#efefe7;border:1px solid #e7e8dd;border-radius:7px;height:94px;display:flex;align-items:center;flex-direction:column;justify-content:center;margin-bottom:20px}#brush-preview svg{width:100%;height:53px}#brush-label{font-size:9px;color:#8e9684}.range-label{display:flex;align-items:center;justify-content:space-between;font-size:10px;margin:0 0 12px}.range-label>span,.range-label output{color:#8a9580;font-size:10px}.range-label input[type=number]{width:37px;padding:1px 3px;border:0;background:transparent;text-align:right;-moz-appearance:textfield}.range-label input::-webkit-inner-spin-button{-webkit-appearance:none}.properties>input[type=range],#fill-options input[type=range]{width:100%;display:block;margin:0 0 23px}.current-color{border-top:1px solid var(--border);padding-top:16px;display:flex;align-items:center;gap:10px}.current-color>span{height:32px;width:32px;background:#242a29;border-radius:6px;border:1px solid #27332913}.current-color>div{display:flex;flex-direction:column;gap:3px;flex:1}.current-color small{font-size:8px;color:#949c8b}.current-color input{border:0;background:transparent;padding:0;width:90px;font-size:10px;font-family:monospace;font-weight:600}.current-color svg{width:15px;color:#899580}.layers-section{border-top:1px solid var(--border);min-height:180px}.layers-section .inspector-heading{padding-top:12px;padding-bottom:8px}.inspector-heading small{font-size:9px;border-radius:3px;background:#e8ebe2;padding:2px 5px;color:#929c86}.inspector-heading button{padding:4px}.layer-opacity{display:flex;gap:7px;align-items:center;padding:4px 19px 13px;font-size:9px;color:#88927d}.layer-opacity input{width:70px;flex:1}.layer-opacity output{width:29px;text-align:right;font-size:9px}#layers{padding:0 10px;min-height:60px;max-height:220px;overflow:auto}.layer{display:flex;align-items:center;border:1px solid transparent;border-radius:6px;margin-bottom:4px;gap:3px;padding:5px 3px}.layer.selected{border-color:#d4dbca;background:#e9ede2}.layer-eye{padding:4px;color:#88917e}.layer-select{display:flex;gap:10px;flex:1;min-width:0;text-align:left;justify-content:flex-start;padding:0}.layer-select span{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer canvas{width:39px;height:29px;border:1px solid #d8ddcf;border-radius:2px;background:repeating-conic-gradient(#e1e5db 0% 25%,#fff 0% 50%) 50% / 8px 8px}.layer-actions{display:flex;padding:7px 13px 10px;justify-content:space-between}.layer-actions button{padding:5px;color:#8b9581}.layer-actions svg{width:15px;height:15px}.statusbar{height:36px;display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:0 17px;background:var(--paper);border-top:1px solid var(--border);gap:10px;font-size:10px;color:#889380}.statusbar>div{display:flex;align-items:center;gap:11px;min-width:0}#status-message{max-width:420px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.status-led{width:5px;height:5px;border-radius:50%;background:#a2b38a;flex-shrink:0}.status-divider{height:12px;border-left:1px solid var(--border);margin:0 2px}.statusbar button{padding:4px;color:#80906f}.statusbar svg{width:15px;height:15px}.zoom-controls{gap:7px!important}.zoom-controls input{width:100px}.zoom-controls #zoom-label{width:43px;font-size:10px}#text-options{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}#text-options label{font-size:10px}#text-options select,#text-options input[type=number]{display:block;width:100%;padding:5px;margin-top:4px}.text-toggles{display:flex;flex-wrap:wrap;gap:6px}.text-toggles input{margin:0 3px 0 0}.check-label{display:flex!important;align-items:center;gap:6px;line-height:1.5}.small-button{border:1px solid var(--border);font-size:11px;padding:7px}dialog{width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 48px);border:1px solid var(--border);border-radius:13px;background:var(--paper);color:#33402f;padding:0;box-shadow:0 20px 80px #202a3430}dialog::backdrop{background:#1f2a254d;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}dialog header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:18px 24px}dialog h2{font-size:17px;letter-spacing:-.5px;margin:0}#dialog-content{padding:20px 24px;font-size:12px;line-height:1.8;max-height:65dvh;overflow:auto}#dialog-content p{margin:0 0 16px}#dialog-content label:not(.check-label){display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-size:11px}#dialog-content input,#dialog-content select{width:100%;font-size:12px}#dialog-content input[type=checkbox]{width:auto}#dialog-content .check-label{margin:0 0 17px;font-size:11px}.dialog-description{color:#89937e;font-size:11px;line-height:1.8}.form-row{display:flex;gap:15px;align-items:center}.form-row label{flex:1;min-width:0}.form-row input{min-width:0}.form-row>span{padding-bottom:0;color:#9aa18e}.export-info{background:#edf0e6;border-radius:6px;padding:10px;font-size:10px;color:#849275}.export-info span{margin:0 6px}dialog footer{border-top:1px solid var(--border);padding:16px 24px;display:flex;justify-content:flex-end;gap:10px}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:10px;margin:20px 0}.shortcut-grid kbd{font-family:inherit;color:#66785a;background:#edf0e7;border-radius:3px;padding:2px 6px;width:max-content}.shortcut-grid span{align-self:center;color:#8c9582}#toast{position:fixed;bottom:57px;left:50%;transform:translate(-50%,12px);background:#354c3f;color:#fffdf2;border-radius:8px;padding:12px 20px;box-shadow:0 5px 24px #21352822;font-size:12px;max-width:90vw;text-align:center;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:100}#toast.show{opacity:1;transform:translate(-50%)}#print-image{display:none}@media(min-width:1600px){.ribbon-group{padding-left:27px;padding-right:27px}.toolrail{gap:12px}.properties{padding-bottom:25px}}@media(max-width:1190px){.ribbon-group{padding-left:13px;padding-right:13px}.shape-picker{grid-template-columns:repeat(13,20px)}.shape-group{padding-left:10px;padding-right:10px}.image-group{display:none}.inspector{width:225px}.palette{gap:5px 4px;grid-template-columns:repeat(12,16px)}.palette button{width:16px;height:16px}.color-controls{gap:8px}.color-group .muted{display:none}}@media(max-width:900px){.topbar{padding:0 17px;height:61px}.document-name input{width:150px}.header-actions{gap:7px}.inspector{width:202px}.properties,.inspector-heading{padding-left:14px;padding-right:14px}.ribbon{min-height:91px}.ribbon-group{padding-left:11px;padding-right:11px}.toolrail{width:55px;gap:5px}.toolrail>button.active:before{left:-8px}.canvas-footnote{padding:16px}.statusbar{padding:0 10px}#coordinates,.statusbar #selection-info{display:none}#status-message{max-width:240px}}@media(max-width:650px){#app{min-height:630px}.topbar{height:58px;gap:8px;padding:0 12px}.brand{gap:7px}.brand-mark{width:28px;height:28px;border-radius:7px}.brand-mark svg{width:18px}.brand h1{font-size:25px}.document-name{flex:1;min-width:0;margin:0;gap:3px}.document-name input{width:100%;max-width:111px;min-width:0;padding:4px;font-size:10px}.header-actions>.primary{font-size:10px;padding:8px 10px;gap:4px}.header-actions>.primary svg{width:14px}.header-actions>button[data-action=open]{display:none}.menubar{padding:0 13px;height:35px}.menus{gap:21px}.menu summary,.menu-help{font-size:10px}.history-controls>span{display:none!important}.history-controls button{padding:4px}.ribbon{padding:9px 10px 7px;min-height:81px}.brush-group{padding-left:2px!important}.brush-selector{gap:3px;height:37px}.brush-selector svg{width:19px}.brush-selector select{font-size:10px;width:96px}.shape-picker{grid-template-columns:repeat(13,20px);grid-template-rows:repeat(2,20px)}.group-label{font-size:8px}.editor{position:relative;flex-wrap:wrap}.toolrail{width:46px;padding:10px 0;gap:4px}.toolrail>button{width:33px;height:32px;min-height:32px}.toolrail>button svg{width:19px}.toolrail>button.active:before{left:-6px}.workarea{width:calc(100% - 46px);height:calc(100% - 104px);flex:auto}.toolrail{height:calc(100% - 104px)}.canvas-footnote{padding:10px 17px;font-size:7px}.keycap{font-size:7px}.inspector{height:104px;width:100%;flex-direction:row;overflow:auto;border-left:0;border-top:1px solid var(--border)}.inspector>.inspector-heading,.current-color,#brush-preview{display:none}.properties{min-width:150px;width:150px;padding:10px 13px;border-right:1px solid var(--border)}.range-label{font-size:9px;margin-bottom:6px}.range-label>span,.range-label output{font-size:9px}.properties>input[type=range]{margin-bottom:12px}.layers-section{min-height:0;min-width:195px;border:0;flex:1;position:relative}.layers-section .inspector-heading{padding:5px 9px;font-size:10px}.layer-opacity{display:none}#layers{height:45px;min-height:0;padding:0 8px}.layer{padding:3px;margin:0}.layer canvas{height:20px;width:28px}.layer-actions{padding:1px 10px;justify-content:flex-end;gap:3px}.layer-actions button{padding:2px}.layer-actions svg{width:12px;height:12px}.layer-select span{font-size:9px}.layer-eye svg{width:13px;height:13px}.statusbar{height:32px;font-size:8px;gap:3px}.statusbar>div{gap:5px}#status-message{max-width:125px}.statusbar .status-divider{display:none}.zoom-controls{gap:2px!important}.zoom-controls input{width:55px}.zoom-controls button svg{width:12px}.zoom-controls #zoom-label{width:34px;font-size:9px}.statusbar .status-led{display:none}.dropdown{min-width:220px}.menu:nth-child(4) .dropdown{left:-95px}#text-options{position:fixed;right:10px;top:190px;width:190px;background:var(--paper);padding:15px;z-index:10;border:1px solid var(--border);box-shadow:0 5px 20px #1c291922;border-radius:8px}#fill-options{position:absolute;bottom:150px;left:60px;background:var(--paper);padding:15px;border:1px solid var(--border);border-radius:8px;z-index:10;width:180px}#fill-options input[type=range]{margin-bottom:0}}@media print{body,#app{height:auto;min-height:0;background:#fff}#app,#toast,dialog{display:none!important}#print-image{display:block;max-width:100%;max-height:95vh;object-fit:contain;margin:auto}@page{margin:10mm}}#canvas-resize-handle{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;padding:0;border:1px solid #61745b;border-radius:1px;background:#fffefb;box-shadow:0 1px 3px #26332d25;cursor:nwse-resize;touch-action:none;z-index:7}#canvas-resize-handle:before{content:"";position:absolute;inset:-8px}#canvas-resize-handle:hover{background:#e6eddf;border-color:var(--accent)}#resize-preview{position:absolute;top:0;left:0;border:1px dashed var(--accent);pointer-events:none;z-index:6}.canvas-info{margin:auto 19px 20px;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:9px}.canvas-info h2{margin:0;font-size:10px;font-weight:500;color:#88927d}#canvas-dimensions{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}@media(max-width:650px){.canvas-info{margin:0;padding:16px 12px;border-top:0;border-left:1px solid var(--border);flex-shrink:0}#canvas-dimensions{font-size:10px}}.guide-link{color:#718168;font-size:11px;white-space:nowrap;text-decoration:none}.guide-link:hover{text-decoration:underline}@media(max-width:650px){.guide-link{font-size:9px}.header-actions{gap:3px}.topbar{gap:5px}}