@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{font-family:'DM Sans','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#17221e;background:#f5f6f8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink:#17221e;--muted:#77817d;--line:#e7eae8;--green:#087c59;--green-dark:#066647}
*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(ellipse at 86% 0%,rgba(214,231,222,.24),transparent 34rem),#f5f6f8}button{font:inherit;-webkit-tap-highlight-color:transparent}.app-shell{width:min(100% - 48px,1040px);min-height:100vh;margin:0 auto;display:flex;flex-direction:column}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(222,227,224,.8)}.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:700;letter-spacing:-.025em}.brand-mark{display:grid;place-items:center;width:34px;height:30px;border-radius:9px;color:#fff;background:var(--green);font-size:11px;font-weight:700;box-shadow:0 3px 8px #087c5926}.privacy-note{display:flex;align-items:center;gap:8px;color:#697671;font-size:12px}.privacy-dot,.status-dot{display:inline-block;width:7px;height:7px;border-radius:99px;background:#36a979;box-shadow:0 0 0 3px #36a97919}
.hero{display:flex;align-items:center;justify-content:space-between;min-height:485px;margin-top:23px;padding:42px 64px 42px 67px;overflow:hidden;border:1px solid #e9ecea;border-radius:20px;background:#fff;box-shadow:0 16px 55px #24352e0e,0 2px 7px #24352e06}.hero-copy{position:relative;z-index:1;width:52%;max-width:500px}.eyebrow{margin:0 0 13px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.06em}h1{margin:0;font-size:clamp(35px,4vw,45px);line-height:1.3;letter-spacing:-.065em;font-weight:800}.intro{max-width:400px;margin:14px 0 24px;color:#697570;font-size:13px;line-height:1.8;letter-spacing:-.025em}.dropzone{min-height:174px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:17px;border:1px dashed #bdd8ca;border-radius:12px;background:#f8fcf9;cursor:pointer;transition:border .15s,background .15s}.dropzone:hover,.dropzone:focus-visible,.dropzone.dragover{outline:none;border-color:#16835e;background:#f0faf4}.upload-icon{display:grid;place-items:center;width:32px;height:32px;margin-bottom:7px;border-radius:10px;color:var(--green);background:#e8f5ef}.upload-icon svg,.button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dropzone strong{font-size:12px}.drop-hint{margin:5px 0 10px;color:#8d9792;font-size:10px;text-align:center}.helper{margin:11px 0 0;color:#9aa29e;font-size:10px}.button{min-height:39px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;border:1px solid transparent;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:-.02em;cursor:pointer;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}.button:focus-visible{outline:3px solid #0c956d55;outline-offset:2px}.button:active{transform:translateY(1px)}.button-primary{color:#fff;background:var(--green);box-shadow:0 3px 7px #087c5926}.button-primary:hover:not(:disabled){background:var(--green-dark);box-shadow:0 4px 10px #087c5935}.button-primary:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}.button-secondary{color:#38453f;border-color:#e1e6e3;background:#fff}.button-secondary:hover{border-color:#cbd6d0;background:#f8faf9}.dropzone .button{min-height:33px;padding:0 13px;font-size:11px}
.hero-visual{position:relative;width:395px;height:330px;flex:0 0 395px;margin-left:20px}.visual-file{position:absolute;z-index:2;width:136px;height:68px;display:flex;align-items:center;gap:11px;padding:0 13px;border:1px solid #e5ebe7;border-radius:11px;background:#fff;box-shadow:0 8px 20px #24352e0e;color:#68736d;font-size:11px;font-weight:600}.visual-file b{display:grid;place-items:center;width:31px;height:34px;border-radius:7px;font:700 11px 'DM Sans',sans-serif}.file-html{top:27px;left:23px;transform:rotate(-5deg)}.file-html b{color:#fff;background:#e87954}.file-css{top:122px;left:6px;transform:rotate(4deg)}.file-css b{color:#fff;background:#668be5;font-size:17px}.file-js{top:218px;left:36px;transform:rotate(-3deg)}.file-js b{color:#514313;background:#f5dc72}.merge-arrow{position:absolute;top:142px;left:174px;color:#6daa89;font-size:32px;font-weight:400}.visual-output{position:absolute;top:53px;right:16px;width:161px;height:221px;border:1px solid #dfe9e3;border-radius:12px;background:#fff;box-shadow:0 14px 35px #274d3a12;transform:rotate(3deg)}.output-head{height:29px;display:flex;align-items:center;gap:5px;padding:0 11px;border-bottom:1px solid #f0f2f1}.output-head i{width:6px;height:6px;border-radius:50%;background:#dce5df}.output-head i:first-child{background:#9ed0b5}.output-code{display:flex;flex-direction:column;gap:13px;padding:22px 17px}.output-code span{width:79px;height:4px;border-radius:4px;background:#e5ede8}.output-code span:nth-child(2){width:113px;background:#b3ddc7}.output-code span:nth-child(3){width:96px}.output-code span:nth-child(4){width:105px;background:#dce9e1}.output-code span:nth-child(5){width:74px}.output-code span:nth-child(6){width:110px;background:#b3ddc7}.visual-output>b{position:absolute;right:12px;bottom:10px;color:#16835e;font-size:9px;letter-spacing:.08em}.visual-caption{position:absolute;right:26px;bottom:20px;color:#87948d;font-size:10px}
.workspace{margin-top:27px;padding:27px 30px 18px;border:1px solid #e5e9e6;border-radius:15px;background:#fff;box-shadow:0 10px 35px #24352e0b}.workspace-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.workspace-head .eyebrow{margin-bottom:5px}.workspace-head h2,.howto-title h2{margin:0;font-size:20px;letter-spacing:-.045em}.workspace-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.file-panel,.result-panel{min-width:0;border:1px solid #e9edea;border-radius:11px;background:#fff}.panel-heading{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #edf0ee;color:#37433d;font-size:11px}.panel-heading>span{color:#8c9791;font-size:10px;font-weight:400}.result-badge{padding:4px 8px;border-radius:20px;background:#f1f3f2}.result-badge.done{color:#087c59;background:#e8f5ef}.file-list{max-height:210px;min-height:150px;margin:0;padding:5px 12px;overflow:auto;list-style:none}.file-item{display:flex;align-items:center;gap:9px;padding:8px 2px;border-bottom:1px solid #f2f4f3}.file-item:last-child{border-bottom:0}.type-icon{width:27px;height:29px;flex:0 0 auto;display:grid;place-items:center;border-radius:6px;color:#62746a;background:#f0f4f1;font:600 8px 'DM Sans',sans-serif}.type-icon.html{color:#ca5935;background:#fff0e9}.type-icon.css{color:#5578ca;background:#edf2ff}.type-icon.js{color:#947c1c;background:#fff8d9}.file-item-name{min-width:0;flex:1;overflow:hidden;color:#35423b;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.file-item-size{flex:0 0 auto;color:#a0aaa4;font-size:9px}.panel-note{padding:9px 13px;border-top:1px solid #edf0ee;color:#87928c;font-size:9px}.result-content{min-height:150px;padding:14px}.result-placeholder{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#9aa39e;text-align:center}.placeholder-icon{font-size:20px;color:#93c8aa}.result-placeholder strong{color:#64716a;font-size:11px}.result-placeholder span:last-child{font-size:9px}.result-summary{color:#5b6961;font-size:10px;line-height:1.9}.result-summary strong{color:#197650}.result-summary .warning{color:#a56b18}.result-actions{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid #edf0ee}.result-actions .button{min-height:35px;font-size:11px}.status{min-height:39px;display:flex;align-items:center;gap:9px;padding:0 3px;color:#6f7c75;font-size:10px}.status.error{color:#b34d44}.status.error .status-dot{background:#d45c50;box-shadow:0 0 0 3px #d45c5019}.status.busy .status-dot{background:#d39735;box-shadow:0 0 0 3px #d3973519}
.howto{margin:43px 8px 37px}.howto-title{display:flex;align-items:center;gap:10px;margin-bottom:20px}.howto-title>span{color:#15906a;font:500 11px 'DM Sans',sans-serif}.howto-title h2{font-size:15px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.steps article{display:flex;gap:11px;align-items:flex-start}.step-number{width:25px;height:25px;flex:0 0 auto;display:grid;place-items:center;border:1px solid #dcece3;border-radius:8px;color:#16835e;background:#f4faf6;font-size:10px;font-weight:700}.steps strong{font-size:11px}.steps p{margin:5px 0 0;color:#87928c;font-size:10px;line-height:1.65}.page-footer{margin-top:auto;padding:23px 0 21px;border-top:1px solid #e8ebe9;color:#929c97;text-align:center;font-size:10px}.page-footer span{padding:0 5px;color:#c1c7c3}.notice-dialog{width:min(420px,calc(100% - 32px));padding:27px;border:1px solid #e7ebe8;border-radius:15px;color:var(--ink);background:#fff;box-shadow:0 22px 80px #162c2230}.notice-dialog::backdrop{background:#17251e73;backdrop-filter:blur(3px)}.dialog-icon{display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;border-radius:11px;color:#a76314;background:#fff4df;font-weight:700}.notice-dialog h2{margin:0 0 8px;font-size:17px;letter-spacing:-.04em}.notice-dialog p{margin:0 0 20px;color:#697570;font-size:12px;line-height:1.7;white-space:pre-line}.notice-dialog .button{min-width:78px}[hidden]{display:none!important}
@media(max-width:800px){.app-shell{width:min(100% - 32px,600px)}.topbar{height:68px}.privacy-note{font-size:10px}.hero{min-height:0;flex-direction:column;align-items:stretch;margin-top:18px;padding:33px 26px 12px;border-radius:16px}.hero-copy{width:100%;max-width:none}.hero-visual{align-self:center;margin:10px 0 0;transform:scale(.86);transform-origin:top center;height:286px}.howto{margin:32px 5px 28px}.steps{grid-template-columns:1fr;gap:15px}.steps article{gap:10px}.steps p{font-size:10px}.workspace{margin-top:17px;padding:21px 16px 10px}.workspace-grid{grid-template-columns:1fr}.file-list{min-height:100px;max-height:175px}.result-content{min-height:116px}.result-placeholder{min-height:90px}.page-footer{padding:18px 0;font-size:9px}}
@media(max-width:430px){.app-shell{width:calc(100% - 24px)}.privacy-note{max-width:145px;text-align:right}.hero{padding:29px 20px 2px}h1{font-size:35px}.intro{font-size:12px}.dropzone{min-height:165px}.drop-hint{font-size:9px}.hero-visual{left:50%;margin-left:-197px;transform:scale(.77);transform-origin:top center;height:260px;width:395px}.workspace-head h2{font-size:18px}.workspace-head .button{min-height:35px;padding:0 10px;font-size:10px}.result-actions .button{flex:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}