:root{--bg:#fafaf9;--card:#fff;--text:#1c1917;--muted:#78716c;--line:#e7e5e4;--accent:#2563eb;color:var(--text);background:var(--bg);font-family:Pretendard Variable,Pretendard,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}.top{text-align:center;padding:48px 16px 24px}.top h1{margin:0 0 8px;font-size:28px}.top p{color:var(--muted);margin:0}.wrap{max-width:1100px;margin:0 auto;padding:0 16px 48px}.drop{border:2px dashed var(--line);background:var(--card);cursor:pointer;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:240px;transition:border-color .15s,background .15s;display:flex}.drop:hover,.drop.over{border-color:var(--accent);background:#eff6ff}.drop span{color:var(--muted);font-size:14px}.work{grid-template-columns:260px 1fr;align-items:start;gap:20px;display:grid}.controls{background:var(--card);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:18px;padding:20px;display:flex}.controls label{flex-direction:column;gap:6px;font-size:14px;font-weight:600;display:flex}.controls output{color:var(--accent)}.controls small{color:var(--muted);font-weight:400}.controls .color{flex-direction:row;align-items:center;gap:10px}.controls input[type=color]{border:1px solid var(--line);border-radius:6px;width:40px;height:32px;padding:0}.controls[data-mode=mono] [data-mode=color],.controls[data-mode=color] [data-mode=mono]{display:none}.modes{background:#f5f5f4;border-radius:10px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.modes label{display:block}.modes input{opacity:0;position:absolute}.modes span{text-align:center;cursor:pointer;border-radius:8px;padding:8px;display:block}.modes input:checked+span{background:var(--card);box-shadow:0 1px 3px #0000001f}.modes input:focus-visible+span{outline:2px solid var(--accent)}button{font:inherit;border:1px solid var(--line);background:var(--card);cursor:pointer;border-radius:10px;padding:10px 14px}.color button{padding:6px 10px;font-size:13px;font-weight:400}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button:disabled{opacity:.5;cursor:default}.compare{grid-template-columns:1fr 1fr;gap:16px;display:grid}.compare figure{background:var(--card);border:1px solid var(--line);border-radius:16px;margin:0;padding:12px}.compare figcaption{color:var(--muted);margin-bottom:8px;font-size:13px}.compare img,.result svg{width:100%;height:auto;display:block}.result{background:repeating-conic-gradient(#f0f0f0 0 25%, #fff 0 50%) 0 0 / 16px 16px;border-radius:8px;min-height:120px}.lang{justify-content:flex-end;align-items:center;gap:8px;padding:12px 16px 0;font-size:14px;display:flex}.lang span{color:var(--muted)}.lang a{color:var(--accent)}.feedback{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-top:40px;padding:20px}.feedback h2{margin:0 0 6px;font-size:18px}.feedback p{color:#44403c;margin:0 0 14px;line-height:1.6}.feedback form{flex-direction:column;gap:10px;display:flex}.feedback select,.feedback textarea{font:inherit;border:1px solid var(--line);background:var(--card);color:inherit;border-radius:10px;padding:10px}.feedback select{align-self:flex-start}.feedback textarea{resize:vertical}.feedback .row{align-items:center;gap:12px;display:flex}.feedback .row span{color:var(--muted);font-size:14px}.hp{opacity:0;width:1px;height:1px;position:absolute;left:-9999px}.about{margin-top:48px;line-height:1.7}.about h2{margin-top:32px;font-size:20px}.about h3{margin-bottom:4px;font-size:16px}.about p{color:#44403c;margin-top:0}.foot{text-align:center;padding:24px 16px;font-size:13px}.foot a{color:var(--muted)}@media (width<=760px){.top h1{font-size:22px}.work,.compare{grid-template-columns:1fr}}