:root{--ink:#10141d;--muted:#6c7481;--line:#e3e7ed;--page:#f0f2f6;--orange:#ff813a;--blue:#1968f2;--shadow:0 8px 28px #1c2a3b0c}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--page);color:var(--ink);font:15px/1.55 system-ui,-apple-system,"Noto Sans KR","Malgun Gothic",sans-serif;letter-spacing:-.02em}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #5491f1;outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit}h1,h2,h3,p{margin:0}h1{font-size:clamp(30px,3vw,45px);line-height:1.18;letter-spacing:-.06em}h2{font-size:22px;line-height:1.35;letter-spacing:-.04em}h3{font-size:17px;letter-spacing:-.03em}.muted{color:var(--muted)}[hidden]{display:none!important}
.top{height:64px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:8}.brand{text-decoration:none;font-weight:850;font-size:16px;letter-spacing:.08em;display:flex;align-items:center;gap:8px}.brand b{font-size:11px;letter-spacing:.1em;color:#697484}.brand-mark{display:block;width:17px;height:17px;border-radius:5px;background:conic-gradient(#2977f4 0 25%,#6cc8ad 25% 50%,#ffb634 50% 75%,#f15c62 75%)}.top-label{font-size:12px;color:var(--muted)}main{max-width:1570px;margin:auto;padding:24px}.panel{background:#fff;border:1px solid #e7eaf0;border-radius:18px;box-shadow:var(--shadow)}.hero{display:grid;grid-template-columns:1fr 1.18fr;gap:45px;padding:34px;margin-bottom:22px}.overline,.eyebrow{font-size:10px;font-weight:800;letter-spacing:.13em;color:#e97939;margin-bottom:12px}.hero>div>p{font-size:15px;max-width:580px;color:#555f6c;margin:18px 0 24px}.search-box{background:#f6f7f9;border:1px solid #e2e6ec;border-radius:15px;padding:12px}.search-label{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e0e4e9;border-radius:11px;padding:0 14px;min-height:52px;box-shadow:0 2px 5px #00000008}.search-label span{font-size:28px;line-height:1}.search-label input{width:100%;border:0;outline:none;font-weight:600;color:#202733;min-width:0;font-size:14px}.pills{display:flex;gap:6px;flex-wrap:wrap}.search-box .pills{margin-top:10px}.pills button,.combo-tabs button{border:1px solid #e0e4ea;background:white;border-radius:8px;padding:9px 16px;font-size:12px;font-weight:700;color:#4d5662}.pills button.active,.combo-tabs button.active{background:#151b29;color:white;border-color:#151b29}.custom-hex{padding:10px 2px 0}.concept-head{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-bottom:14px}.concept-head h2{font-size:18px}.concept-head p,.section-row p{font-size:12px;color:#858d98;margin-top:3px}.concept-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.concept{border:1px solid #e1e5ec;background:#fff;border-radius:10px;min-width:0;padding:5px;text-align:left}.concept.active{outline:2px solid #ff8a45;outline-offset:2px}.concept i{display:block;height:40px;border-radius:7px;background:var(--color);border:1px solid #0000000c}.concept b,.concept small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.concept b{font-size:11px;margin-top:5px}.concept small{font-size:10px;color:#939ba5}.text-btn{border:0;background:none;color:#67707c;font-size:12px;font-weight:700;padding:5px;text-decoration:none;white-space:nowrap}.text-btn:hover{color:#e86e2b}
.catalog{padding:25px 28px;margin-bottom:22px}.section-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}.brand-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}.brand-card{padding:0;background:#fff;border:1px solid var(--line);border-radius:12px;text-align:left;overflow:hidden;min-width:0;transition:transform .15s,box-shadow .15s}.brand-card:hover{transform:translateY(-3px);box-shadow:0 8px 15px #1b34471c}.brand-strip{height:70px;background:var(--color);color:var(--on-color);display:flex;align-items:flex-end;padding:10px;font-size:11px;font-weight:800;letter-spacing:.04em}.brand-info{padding:10px 11px;display:flex;justify-content:space-between;align-items:center;gap:4px}.brand-info b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-info small{color:#8b929c;font-size:10px;white-space:nowrap}.more{text-align:center;margin:18px 0 4px}.outline,.primary,.on-color{border:1px solid #dce1e8;background:#fff;color:#28313d;padding:10px 16px;border-radius:9px;font-weight:750}.outline:hover{background:#f5f7fa}.primary{background:var(--orange);border-color:var(--orange);color:white}.primary:hover{background:#ee7130}.small{font-size:12px;padding:8px 12px}.data-note{font-size:11px;line-height:1.7;color:#8b939e;border-top:1px solid #eef0f3;padding:13px 0}.data-note a{color:#64798c}.image-lab{display:grid;grid-template-columns:220px 1fr;gap:20px;background:#f8f9fb;border:1px dashed #cbd1db;border-radius:14px;padding:16px;margin-top:5px}.image-drop{border:1px dashed #c3cbd6;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:3px;flex-direction:column;min-height:140px;cursor:pointer;text-align:center;padding:12px}.image-drop.dragging{border-color:var(--blue);background:#eef5ff}.image-drop input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.image-icon{font-size:28px;color:#5a6f87}.image-drop small,.image-output p{font-size:11px;color:#87909c}.image-output h3{margin:4px 0}.image-output p{margin:4px 0 12px}.image-swatches{display:flex;flex-wrap:wrap;gap:6px;min-height:38px;align-items:center;margin-bottom:10px}.image-swatches span{font-size:12px}.image-chip{border:1px solid #d9dfe8;border-radius:7px;display:flex;align-items:center;gap:6px;background:#fff;padding:5px 7px;font-size:11px;font-weight:750}.image-chip i{height:24px;width:24px;border-radius:5px;display:block;background:var(--color);border:1px solid #0001}
.workspace{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;align-items:start}.side{padding:15px;position:sticky;top:82px}.side-summary{padding:5px 6px 13px;border-bottom:1px solid #ecedf0}.side-summary small,.side-summary strong,.side-summary span{display:block}.side-summary small,.side-summary span{font-size:10px;color:#8d95a0}.side-summary strong{font-size:15px;margin:3px 0}.side-summary div{width:24px;height:24px;border-radius:6px;background:var(--color);margin:7px 0}.side nav{display:grid;gap:4px;padding:10px 0}.side nav button{border:0;background:none;border-radius:8px;text-align:left;padding:9px;color:#4c5662;font-size:12px;font-weight:700}.side nav button:hover{background:#f2f5f9;color:#111}.work-main{min-width:0}.work-panel{padding:24px 28px;margin-bottom:20px;scroll-margin-top:82px}.bar-heading{display:flex;align-items:center;justify-content:space-between;background:#f0f5ff;border:1px solid #c7d7f4;border-left:6px solid var(--blue);border-radius:11px;padding:14px 16px;gap:8px;margin-bottom:20px}.bar-heading>div{display:flex;align-items:center;gap:12px}.bar-heading span{font-size:12px;color:#8da2c4;font-weight:700}.bar-heading h2{font-size:23px}.current-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:14px}.current-head h2{font-size:31px}.current-head .eyebrow{margin-bottom:3px}.current-head p{font-size:12px;margin-top:3px}.primary-color{border-radius:12px;min-height:110px;padding:19px 22px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--color);color:var(--on-color)}.primary-color small,.primary-color strong{display:block}.primary-color small{font-size:11px;opacity:.75}.primary-color strong{font-size:26px;letter-spacing:.03em}.primary-controls{display:flex;align-items:center;gap:7px}.on-color{background:#ffffff20;border-color:#ffffff88;color:inherit;font-size:11px}.color-input-label{font-size:11px;display:flex;align-items:center;gap:6px;font-weight:700}.color-input-label input,.gradient-controls input[type=color]{border:2px solid #fff;border-radius:50%;padding:0;width:30px;height:30px;overflow:hidden;cursor:pointer;background:none}.subheading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:20px 0 10px}.subheading p,.intro{font-size:12px;color:#717b88;margin-top:5px}.pin-options{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.pin{padding:8px;background:#fff;border:1px solid #dce1e8;border-radius:9px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}.pin.active{border:2px solid var(--blue);padding:7px}.pin i{width:28px;height:28px;border-radius:6px;display:block;background:var(--color);border:1px solid #0001}.fine{font-size:11px;margin-top:14px}.combo-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 12px}.combo-tabs button{text-align:left;font-size:14px;padding:12px}.combo-tabs small{display:block;font-size:10px;font-weight:500;opacity:.7}.filter-line{display:flex;align-items:center;flex-wrap:wrap;gap:12px;background:#f7f8fa;border:1px solid #e8ebef;padding:11px 13px;border-radius:10px;margin:12px 0 18px;font-size:11px;font-weight:700}.filter-line label{display:flex;align-items:center;gap:6px}.filter-line select{max-width:155px;border:1px solid #dce2e9;border-radius:7px;background:#fff;padding:6px;font-size:11px;color:#313a47}.filter-line .muted{font-weight:400}.combo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.combo-card{border:1px solid #dfe4eb;border-radius:12px;overflow:hidden}.combo-card.selected{border:2px solid #ff8b43}.combo-swatches{display:flex;min-height:128px}.combo-swatch{flex:1;min-width:0;padding:8px 4px;display:flex;align-items:center;justify-content:space-between;flex-direction:column;background:var(--color);color:var(--on-color)}.swatch-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}.swatch-tools button,.swatch-tools label{cursor:pointer;background:#ffffff30;border:0;border-radius:5px;color:inherit;font-size:11px;padding:3px;line-height:1.4}.swatch-tools input{width:16px;height:16px;border:0;padding:0;background:none;vertical-align:middle}.swatch-caption{font-size:10px;font-weight:800;word-break:break-all;text-align:center}.swatch-caption small{display:block;font-size:9px;opacity:.78}.combo-info{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:10px}.combo-info strong{font-size:12px}.combo-info small{display:block;color:#8d96a1;font-size:10px}.combo-info button{border:0;background:#f2f5f9;border-radius:7px;padding:6px;font-size:10px;font-weight:700}.combo-card.selected .combo-info button{background:#fff0e8;color:#d45e1e}
.gradient-section{margin:22px 0}.gradient-section h3{font-size:16px}.gradient-section>p{font-size:11px;color:#8a929d;margin:3px 0 11px}.gradient-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.gradient-card{border:1px solid #e0e5ec;border-radius:10px;overflow:hidden}.gradient-sample{height:92px;padding:11px;display:flex;align-items:end;font-size:15px;font-weight:800}.gradient-body{padding:10px}.gradient-body>strong{font-size:11px}.gradient-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:8px 0}.gradient-controls input[type=color]{width:26px;height:26px;border:1px solid #cad1db}.gradient-controls button,.gradient-controls select{background:#f5f7fa;border:1px solid #e0e4ea;border-radius:5px;padding:4px 6px;font-size:10px;color:#39424e}.gradient-actions{display:flex;gap:5px;flex-wrap:wrap}.gradient-actions button{background:white;border:1px solid #dbe0e8;border-radius:6px;padding:5px 7px;font-size:10px;font-weight:700}.gradient-actions button:hover{background:#f4f6f9}
.contrast-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:17px}.contrast-card{border:1px solid #e2e6ec;border-radius:11px;overflow:hidden}.contrast-title{padding:9px 11px;font-size:12px;font-weight:800}.contrast-samples{display:grid;grid-template-columns:1fr 1fr}.contrast-sample{padding:16px 12px;background:var(--color);color:var(--text)}.contrast-sample b{font-size:15px}.contrast-sample small{font-size:10px;display:block;margin-top:3px}.contrast-recommend{font-size:11px;color:#6e7782;padding:9px 11px;background:#fafbfc}.slide-preview{background:var(--bg);color:var(--fg);border:1px solid #dfe4ea;border-radius:10px;aspect-ratio:16/9;padding:5%;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 25px #172a3c0c}.slide-preview .eyebrow{color:var(--accent)}.slide-preview h3{font-size:clamp(15px,2vw,28px);margin:2px 0}.slide-preview>p{font-size:clamp(9px,1vw,13px);opacity:.65}.slide-preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:3%;margin-top:4%;flex:1}.slide-card{border-radius:var(--radius);border:1px solid var(--outline);background:var(--cardbg);color:var(--cardfg);padding:10%;min-height:80px}.slide-card strong{font-size:clamp(10px,1.2vw,17px)}.slide-card small{display:block;font-size:clamp(8px,.9vw,12px);margin-top:8%;opacity:.8}.slide-preview-foot{font-size:10px;margin-top:3%;opacity:.65}.preview-table{display:grid;grid-template-columns:1fr 2fr 2fr;gap:3px;padding-top:5px;margin-top:3%;font-size:clamp(8px,.8vw,10px)}.preview-table span{padding:3px 6px}.preview-cover{display:inline-block;width:12px;height:12px;vertical-align:middle;border:1px solid #999;margin-left:12px}
.export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.export-grid article{border:1px solid #e1e5eb;border-radius:12px;padding:16px;min-width:0}.export-grid h3{margin:7px 0}.export-grid p{font-size:11px;color:#7b8591;min-height:44px}.export-num{font-size:11px;color:#f27a37;font-weight:900}.export-buttons{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}.export-grid article>button{margin-top:12px}.export-grid pre{white-space:pre-wrap;overflow:auto;max-height:180px;background:#f7f8fa;border-radius:8px;padding:10px;font:10px/1.5 ui-monospace,monospace;color:#5b6571;margin:12px 0 0}footer{text-align:center;color:#8e97a3;font-size:11px;padding:16px 20px 32px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:#18202d;color:#fff;border-radius:8px;padding:10px 15px;opacity:0;pointer-events:none;transition:.2s;font-size:12px;z-index:30;max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}
.recolor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.recolor-toolbar label{cursor:pointer}.recolor-toolbar input{position:absolute;width:1px;height:1px;opacity:0}.recolor-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:15px;max-height:480px;overflow:auto}.recolor-row{display:flex;align-items:center;gap:8px;background:#f7f8fa;padding:8px;border:1px solid #e9edf1;border-radius:8px;font-size:11px}.recolor-row i{width:25px;height:25px;border-radius:5px;background:var(--color);border:1px solid #0002;flex-shrink:0}.recolor-row small{color:#8a929d;white-space:nowrap}.recolor-row select{margin-left:auto;min-width:0;width:45%;padding:5px;border:1px solid #dce2e9;border-radius:6px;background:#fff;font-size:11px}
@media(max-width:1100px){.hero{grid-template-columns:1fr;gap:24px}.concept-grid{grid-template-columns:repeat(8,1fr)}.brand-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.combo-grid,.gradient-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.export-grid{grid-template-columns:1fr}.export-grid p{min-height:0}}
@media(max-width:700px){main{padding:12px}.top{height:55px;padding:0 15px}.top-label{display:none}.hero,.catalog,.work-panel{padding:18px;border-radius:13px}.hero{gap:20px}.hero>div>p{font-size:13px}.concept-grid{grid-template-columns:repeat(4,1fr)}.brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-row{align-items:flex-start;flex-direction:column}.image-lab{grid-template-columns:1fr}.image-drop{min-height:100px}.workspace{grid-template-columns:1fr}.side{position:static;display:flex;align-items:center;gap:10px;overflow:auto;padding:10px}.side-summary{display:none}.side nav{display:flex;gap:3px;padding:0}.side nav button{white-space:nowrap}.side>.text-btn{display:none}.work-panel{scroll-margin-top:65px}.bar-heading h2{font-size:19px}.current-head h2{font-size:25px}.combo-tabs{grid-template-columns:repeat(2,1fr)}.combo-grid,.gradient-grid,.contrast-grid{grid-template-columns:1fr}.primary-color{padding:14px}.primary-color strong{font-size:20px}.slide-preview{aspect-ratio:auto;min-height:260px}.slide-preview-cards{gap:5px}.slide-card{padding:8%}}
@media(max-width:700px){.recolor-list{grid-template-columns:1fr}}