:root{font-family:"DM Sans","Noto Sans KR",sans-serif;color:#242522;background:#f5f4f0;font-synthesis:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;padding:24px 4vw}
main{max-width:1380px;margin:auto}
header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 16px}
header h1{font-size:28px;margin:2px 0 5px;letter-spacing:-.04em}
header p{color:#777971;margin:0}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:#b14b3a}
.header-actions{display:flex;gap:7px;flex:none}.header-action{padding:9px 14px;border:1px solid #deded7;border-radius:9px;background:#fff;color:#494a42;font:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}.header-action:hover,.header-action:focus-visible{border-color:#b14b3a;color:#8d392c;outline:2px solid #b14b3a33}
.mode-tabs{display:flex;gap:6px;margin:0 0 12px}.mode-tab{min-width:120px;height:36px;padding:0 18px;border:1px solid #deded7;border-radius:9px;background:#fff;color:#66685f;font:inherit;cursor:pointer}.mode-tab[aria-pressed=true]{border-color:#b14b3a;background:#fff8f5;color:#8d392c;font-weight:700}
.workspace{display:grid;grid-template-areas:"preview controls";grid-template-columns:minmax(380px,1fr) minmax(680px,720px);gap:18px;align-items:start}
form,.preview{background:white;border:1px solid #e8e7e1;border-radius:14px;box-shadow:0 4px 18px #302e2310}
form{grid-area:controls;display:flex;flex-direction:column;overflow:hidden}
.control-scroll{min-height:0;overflow:auto;padding:18px 18px 0;scrollbar-gutter:stable}
.preview{grid-area:preview;display:flex;flex-direction:column;padding:18px;position:sticky;top:18px}
fieldset{border:0;padding:0;margin:0 0 22px}
legend{font-size:15px;font-weight:700;margin-bottom:12px}
label{font-size:12px;color:#66685f;display:flex;flex-direction:column;gap:6px}
input[type=number],input[type=text],select,output{font:inherit;color:#252620;border:1px solid #deded7;border-radius:7px;padding:9px;width:100%}
output{display:block;background:#f4f2ed;color:#777}
.check{display:flex;flex-direction:row;align-items:center;color:#333;margin:0 0 15px;font-size:13px}
.check input{accent-color:#b14b3a}
.hint{font-size:11px;color:#888;margin:8px 0 0}
.presets{height:275px;margin-bottom:18px;overflow:hidden}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}
.presets h2{font-size:13px;margin:0 0 9px}
.category-picker{width:130px;font-size:11px}
.category-picker select{padding:7px 28px 7px 9px}
.preset-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;height:220px;overflow:auto;padding:2px 4px 2px 2px}
.preset{min-width:0;padding:5px;border:1px solid #e8e7e1;border-radius:8px;background:#faf9f6;color:#494a42;font:inherit;font-size:11px;cursor:pointer}
.preset:hover,.preset:focus-visible,.preset[aria-pressed=true]{border-color:#b14b3a;outline:2px solid #b14b3a33}
.preset canvas{width:100%;height:auto;border-radius:4px}
.preset span{display:block;padding:4px 0 1px}
.axis{border:1px solid #eceae4;border-radius:10px;padding:14px;margin-bottom:12px}
.axis legend{font-size:13px;margin:0;padding:0 5px}
#axes.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
#axes.split .axis{min-width:0}
#axes.split .row{grid-template-columns:minmax(0,1fr) 70px 28px;gap:6px}
.axis-locks{display:flex;margin:-5px 0 9px}
.axis-locks label,.field-label{display:flex;flex-direction:row;align-items:center;gap:5px}
.axis-locks label{font-size:11px;color:#777}
.axis-locks input,.field-label input{accent-color:#b14b3a}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row{display:grid;grid-template-columns:minmax(175px,1.45fr) minmax(70px,.55fr) 30px;gap:10px;align-items:end;margin-bottom:9px}
.row-head{height:20px;display:flex;align-items:center;gap:4px;margin-bottom:6px}
.drag-handle{width:22px;height:22px;padding:0;border:0;background:transparent;color:#999;font-size:17px;line-height:1;cursor:grab;touch-action:none}
.drag-handle:active{cursor:grabbing}.row.dragging{opacity:.55}
.duplicate{width:22px;height:22px;margin-left:auto;padding:0;border:0;border-radius:5px;background:#f3f2ef;color:#777;cursor:pointer}
.color-controls{display:grid;grid-template-columns:42px minmax(0,1fr);gap:6px}
.row .color{width:42px;height:37px;border:3px solid white;border-radius:7px;padding:0;box-shadow:0 0 0 1px #deded7;cursor:pointer}
.color-code:invalid{border-color:#ad342b}
.remove{height:37px;border:0;background:#f3f2ef;border-radius:7px;font-size:19px;color:#777;cursor:pointer}
.secondary,#download{width:100%;height:40px;border:0;border-radius:8px;font:inherit;cursor:pointer}
.secondary{background:#f4f2ed;color:#494a42}
.secondary:hover,.duplicate:hover,.remove:hover{background:#ece9e1}
.edit-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:12px}
#download{background:#292a25;color:white;font-weight:600}
#download:hover{background:#42433c}
.sticky-actions{padding:10px 18px 18px;background:white;border-top:1px solid #eeede8}
#error{font-size:12px;color:#ad342b;min-height:16px;margin:0 0 6px}
.export-note{font-size:11px;color:#777971;margin:0 0 8px;text-align:center}
.preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.preview-head h2{font-size:15px;margin:0}
.preview-head span{font-size:11px;color:#898a83}
canvas{display:block;width:100%;height:auto;border-radius:7px;background-color:#eee;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
#color-picker{width:min(390px,calc(100vw - 24px));padding:0;border:0;border-radius:14px;box-shadow:0 18px 60px #0005;background:#fff;color:#242522}
#color-picker::backdrop,#usage-guide::backdrop{background:#17181570;backdrop-filter:blur(2px)}
#usage-guide{width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:0;border:0;border-radius:14px;box-shadow:0 18px 60px #0005;background:#fff;color:#242522}.guide-panel{padding:20px}.guide-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.guide-head h2{font-size:21px;margin:2px 0 0}.guide-head button{border:0;background:transparent;color:#777;font-size:26px;line-height:1;cursor:pointer}.guide-steps{display:grid;gap:12px;margin:20px 0;padding-left:24px}.guide-steps li{padding-left:4px}.guide-steps strong,.guide-steps span{display:block}.guide-steps strong{font-size:14px;margin-bottom:3px}.guide-steps span,.guide-tip{font-size:13px;line-height:1.55;color:#66685f}.guide-tip{margin:0;padding:12px 14px;border-radius:8px;background:#f5f3ed}.guide-tip strong{color:#494a42}
.color-picker-panel{display:grid;gap:14px;padding:18px}
.color-picker-head{display:flex;align-items:center;justify-content:space-between}.color-picker-head h2{font-size:16px;margin:0}.color-picker-head button{border:0;background:transparent;color:#777;font-size:24px;cursor:pointer}
#color-plane{--hue:0;width:100%;aspect-ratio:1.65;position:relative;border-radius:8px;background:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,hsl(var(--hue) 100% 50%));cursor:crosshair;touch-action:none;box-shadow:inset 0 0 0 1px #0002}
#color-plane span{position:absolute;width:16px;height:16px;border:2px solid white;border-radius:50%;box-shadow:0 1px 4px #000,0 0 0 1px #0008;transform:translate(-50%,-50%);pointer-events:none}
.hue-control{gap:7px}.hue-control span{height:18px;border-radius:9px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);padding:0 2px}.hue-control input{width:100%;height:18px;margin:0;appearance:none;background:transparent;cursor:pointer}.hue-control input::-webkit-slider-thumb{appearance:none;width:14px;height:22px;border:2px solid white;border-radius:4px;background:transparent;box-shadow:0 0 0 1px #444}
.color-value-row{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:end}.color-value-row output{height:38px;padding:0;background:#c74343}
.color-picker-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.color-picker-actions button{height:38px;border:0;border-radius:8px;background:#f1efe9;color:#45463f;font:inherit;cursor:pointer}.color-picker-actions button[value=apply]{background:#292a25;color:white;font-weight:600}
@media(min-width:1181px){body{height:100vh;overflow:hidden}main{height:100%;display:flex;flex-direction:column}.workspace{flex:1;min-height:0;align-items:stretch}.workspace>form,.preview{height:100%}.preview{position:static;overflow:hidden}#pattern{flex:1;min-height:0}}
@media(max-width:1180px){body{padding:16px 12px}main{max-width:none}header h1{font-size:22px}.workspace{grid-template-areas:"controls" "preview";grid-template-columns:1fr;gap:12px}form{overflow:visible}.control-scroll{overflow:visible;padding:14px 14px 0}.sticky-actions{padding:10px 14px 14px}.preview{position:static;padding:14px}.row{grid-template-columns:minmax(165px,1.45fr) minmax(60px,.55fr) 28px;gap:6px}}
@media(max-width:620px){#axes.split{grid-template-columns:1fr}#axes.split .row{grid-template-columns:minmax(165px,1.45fr) minmax(60px,.55fr) 28px}}
@media(max-width:520px){body{padding:12px 8px}header h1{font-size:20px}.settings-grid{grid-template-columns:1fr}.presets{height:255px}.preset-list{height:200px}.edit-actions{grid-template-columns:1fr 1fr}.edit-actions #randomize{grid-column:1/-1}}