@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap";:root{color:#242720;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;background:#f7f6f2;font-family:DM Sans,Noto Sans KR,sans-serif;font-weight:400}*{box-sizing:border-box}body{min-width:320px;margin:0}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{background:#ffffffbd;border-bottom:1px solid #eceae3;justify-content:space-between;align-items:center;height:72px;padding:0 max(50vw - 560px,32px);display:flex}.brand{color:#282b24;letter-spacing:-.5px;align-items:center;gap:10px;font-size:17px;font-weight:800;text-decoration:none;display:flex}.brand-icon{color:#273116;background:#d8ed72;border-radius:10px;place-items:center;width:32px;height:32px;display:grid}.top-note{color:#7b7d74;align-items:center;gap:8px;font-size:12px;display:flex}.live-dot{background:#91ad39;border-radius:9px;width:7px;height:7px;box-shadow:0 0 0 3px #edf3d8}.help{color:#686b61;font:inherit;background:0 0;border:0;font-size:12px}.app main{flex:1;width:min(768px,100% - 40px);margin:0 auto}.intro{text-align:center;padding:54px 0 24px}.eyebrow{letter-spacing:2.2px;color:#7f8f3c;justify-content:center;align-items:center;gap:9px;font-size:10px;font-weight:700;display:flex}.eyebrow-line{background:#adb77d;width:22px;height:1px}.intro h1{letter-spacing:-1.8px;margin:14px 0 9px;font-size:37px;font-weight:800;line-height:1.44}.intro h1 em{color:#748734;font-style:normal;position:relative}.intro h1 em:after{content:"";z-index:-1;background:#e4edbc;width:100%;height:8px;position:absolute;bottom:4px;left:0}.intro p{color:#82847d;margin:0;font-size:13px;line-height:1.85}.steps{color:#acada5;justify-content:center;align-items:center;gap:12px;margin:10px 0 22px;font-size:11px;font-weight:600;display:flex}.steps i{background:#dfdfd7;width:56px;height:1px}.step{white-space:nowrap;align-items:center;gap:7px;display:flex}.step .num{color:#999a91;border:1px solid #dddcd4;border-radius:50%;place-items:center;width:23px;height:23px;font-size:9px;font-weight:700;display:grid}.step.active{color:#4d5e28}.step.active .num{color:#fff;background:#748734;border-color:#748734}.workspace{min-height:300px}.panel{background:#fff;border:1px solid #ecebe5;border-radius:16px;padding:25px 28px 20px;box-shadow:0 9px 30px #3634200b}.panel-head{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.section-kicker{letter-spacing:1.35px;color:#8a914f;font-size:9px;font-weight:700}.section-kicker span{color:#c2c4b5;padding:0 3px}.panel h2{letter-spacing:-.6px;margin:6px 0 4px;font-size:19px}.panel-head p{color:#8b8d85;margin:0;font-size:11px;line-height:1.6}.head-illustration{color:#87994a;background:#f3f6e9;border-radius:13px;flex:none;place-items:center;width:43px;height:43px;margin-left:12px;display:grid}.dropzone{cursor:pointer;background:#fbfbf8;border:1px dashed #d6d8ca;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;height:225px;transition:all .2s;display:flex;position:relative;overflow:hidden}.dropzone:hover{background:#fbfcf5;border-color:#9baa63}.upload-symbol{color:#798c3d;background:#eff3df;border-radius:50%;place-items:center;width:46px;height:46px;margin-bottom:11px;display:grid}.dropzone strong{color:#484a42;font-size:12px;font-weight:600}.browse{color:#fff;font:inherit;cursor:pointer;background:#76883c;border:0;border-radius:6px;align-items:center;gap:6px;margin-top:9px;padding:8px 12px;font-size:10px;font-weight:600;display:flex}.dropzone small{color:#a1a298;margin-top:10px;font-size:9px}.dropzone.has-photo{background:#f0f0ec;border-style:solid}.dropzone.has-photo>img{object-fit:cover;width:100%;height:100%}.photo-overlay{opacity:0;background:linear-gradient(#0000 55%,#00000057);transition:all .2s;position:absolute;inset:0}.dropzone:hover .photo-overlay{opacity:1}.change-photo{font:inherit;cursor:pointer;background:#fffffff0;border:0;border-radius:7px;align-items:center;gap:6px;padding:8px 10px;font-size:10px;display:flex;position:absolute;top:12px;right:12px}.photo-label{color:#61732c;background:#fff;border-radius:20px;align-items:center;gap:5px;padding:6px 10px;font-size:10px;display:flex;position:absolute;bottom:12px;left:13px}.photo-tip{background:#f8f8f3;border-radius:8px;align-items:center;gap:10px;margin:14px 0 18px;padding:11px 12px;display:flex}.tip-icon{color:#93a447;font-size:17px}.photo-tip div{flex-direction:column;gap:3px;display:flex}.photo-tip b{color:#51534a;font-size:10px}.photo-tip span:not(.tip-icon){color:#92948b;font-size:9px}.panel-bottom{border-top:1px solid #f0efe9;justify-content:space-between;align-items:center;padding-top:15px;display:flex}.privacy{color:#8d9087;align-items:center;gap:6px;font-size:9px;display:flex}.privacy svg{color:#84964c}.primary,.secondary{height:38px;font:inherit;cursor:pointer;border:0;border-radius:7px;justify-content:center;align-items:center;gap:8px;padding:0 15px;font-size:11px;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.primary{color:#fff;background:#748638}.primary:hover:not(:disabled){background:#61732c;transform:translateY(-1px)}.primary:disabled{opacity:.45;cursor:not-allowed}.text-button{color:#74766e;font:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:5px;padding:5px 0;font-size:10px;display:flex}.error{color:#a44335;margin-top:11px;font-size:11px}.style-grid{grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:18px;display:grid}.style-card{text-align:left;cursor:pointer;color:#2c2e28;font:inherit;background:#fff;border:1px solid #e9e9e2;border-radius:10px;padding:7px 8px 10px;transition:all .2s;position:relative}.style-card:hover{border-color:#b4bd8f;transform:translateY(-1px)}.style-card.selected{background:#fbfcf7;border:1.5px solid #87994a;box-shadow:0 0 0 2px #eef2df}.style-preview{border-radius:6px;justify-content:center;align-items:flex-end;height:92px;margin-bottom:9px;display:flex;position:relative;overflow:hidden}.style-preview.modern{background:linear-gradient(135deg,#e9e6da,#d8d2c0)}.style-preview.retro{background:linear-gradient(135deg,#e9dfd0,#cfb89d)}.style-preview.premium{background:linear-gradient(135deg,#ddd5c4,#bbab8e)}.style-preview.neon{background:linear-gradient(135deg,#313632,#161d1b)}.style-preview.natural{background:linear-gradient(135deg,#dce3d0,#b5c1a5)}.style-preview.bold{background:linear-gradient(135deg,#e6e2d5,#d5ceba)}.mini-building{background:#ece9df;border-radius:4px 4px 0 0;width:72%;height:62px;position:relative;box-shadow:0 -5px #ffffff42}.mini-sign{color:#fff;letter-spacing:1px;background:#27302c;border-radius:2px;place-items:center;height:18px;font-size:8px;font-weight:800;display:grid;position:absolute;top:-8px;left:4px;right:4px;box-shadow:0 2px 3px #0002}.retro .mini-sign{color:#fae8c0;letter-spacing:0;background:#af5938;font-family:serif}.premium .mini-sign{color:#e5d0a8;background:#493729}.neon .mini-sign{color:#c5fd86;background:#19221e;box-shadow:0 0 7px #a3f971,0 1px 3px #000}.natural .mini-sign{color:#f4ead4;background:#788363}.bold .mini-sign{color:#42311b;background:#e9bd39}.mini-window{background:#849598;border:2px solid #dad8cb;width:17px;height:23px;position:absolute;bottom:0;left:10px}.mini-window.second{left:34px}.mini-door{background:#715a43;border:2px solid #dad8cb;border-bottom:0;width:14px;height:31px;position:absolute;bottom:0;right:9px}.style-card b{margin:0 0 3px 2px;font-size:10px;display:block}.style-card small{color:#8f9188;margin-left:2px;font-size:9px;display:block}.style-radio{color:#fff;border:1px solid #d9dad1;border-radius:50%;place-items:center;width:17px;height:17px;display:grid;position:absolute;bottom:12px;right:11px}.selected .style-radio{background:#7c8f40;border-color:#7c8f40}.result-image{background:#f2f1ed;border-radius:10px;height:355px;position:relative;overflow:hidden}.result-image img{object-fit:contain;width:100%;height:100%}.result-badge{color:#5e702d;background:#ffffffed;border-radius:20px;align-items:center;gap:6px;padding:7px 10px;font-size:10px;display:flex;position:absolute;top:12px;left:12px;box-shadow:0 2px 8px #0001}.result-actions{justify-content:center;gap:9px;margin:16px 0 14px;display:flex}.secondary{color:#5d5f57;background:#fff;border:1px solid #e5e5dd}.secondary:hover{background:#f7f8f2}.result-foot{color:#96978f;border-top:1px solid #f0efe9;justify-content:space-between;align-items:center;padding-top:13px;font-size:9px;display:flex}.result-foot button{color:#73843a;font:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:4px;font-size:9px;display:flex}.bottom-note{text-align:center;color:#97988f;margin:23px 0 28px;font-size:10px}.bottom-note span{color:#96a752;margin-right:4px}.bottom-note b{color:#646e3d}.app footer{color:#aaa99f;letter-spacing:.6px;border-top:1px solid #eae9e2;justify-content:space-between;align-items:center;height:45px;padding:0 max(50vw - 560px,32px);font-size:8px;display:flex}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=600px){.topbar{height:60px;padding:0 18px}.top-note{display:none}.help{font-size:10px}.app main{width:calc(100% - 28px)}.intro{padding:39px 0 21px}.intro h1{letter-spacing:-1.4px;font-size:29px}.intro p{font-size:11px}.steps{gap:7px;font-size:9px}.steps i{width:26px}.step{gap:4px}.step .num{width:21px;height:21px}.panel{padding:19px 16px 15px}.panel-head{margin-bottom:15px}.panel h2{font-size:16px}.panel-head p{max-width:275px;font-size:10px}.head-illustration{width:36px;height:36px}.dropzone{height:200px}.photo-tip span:not(.tip-icon),.privacy{font-size:8px}.primary,.secondary{padding:0 11px;font-size:10px}.style-grid{gap:7px}.style-card{padding:5px 5px 9px}.style-preview{height:72px}.mini-building{height:50px}.style-card b{font-size:9px}.style-card small{font-size:8px}.style-radio{width:14px;height:14px;bottom:9px;right:7px}.result-image{height:250px}.result-foot{align-items:flex-start;gap:8px}.result-foot button{white-space:nowrap}.app footer{padding:0 16px}}.recognized-copy{color:#616f37;font-weight:700}.recognized-copy:before{content:"“"}.recognized-copy:after{content:"”"}.quote-cta{background:#fafbf6;border:1px solid #e7eadc;border-radius:10px;justify-content:space-between;align-items:center;gap:14px;margin:17px 0 13px;padding:14px 15px;display:flex}.quote-cta>div{flex-direction:column;gap:4px;display:flex}.quote-cta b{color:#44483b;font-size:11px}.quote-cta span,.quote-cta small{color:#81847a;font-size:9px}.quote-cta small{color:#6d7e37;margin-top:2px;font-weight:600}.share-note{color:#6d7e37;margin:0 0 12px;font-size:10px;line-height:1.6}.result-foot{margin-top:0}.compare-toolbar{color:#85877e;justify-content:space-between;align-items:center;gap:10px;margin:0 0 11px;font-size:10px;display:flex}.compare-tabs{background:#f2f3ed;border-radius:8px;gap:2px;padding:3px;display:flex}.compare-tabs button{color:#787a71;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:7px 10px;font-size:9px}.compare-tabs button.selected{color:#596b2c;background:#fff;font-weight:700;box-shadow:0 1px 4px #0000000d}.comparison-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.comparison-card{min-width:0;margin:0}.comparison-card figcaption{color:#62645c;justify-content:space-between;align-items:center;height:28px;padding:0 3px;font-size:10px;font-weight:700;display:flex}.comparison-card:nth-child(2) figcaption svg{color:#849640}.comparison-image{background:#f2f1ed;border-radius:9px;height:330px;position:relative;overflow:hidden}.comparison-image img{object-fit:contain;width:100%;height:100%}.comparison-toggle .comparison-image{height:420px}.compare-toggle-buttons{justify-content:center;gap:7px;margin-bottom:10px;display:flex}.compare-toggle-buttons .active{color:#5e712e;background:#f7f9f1;border-color:#829344}@media (width<=600px){.quote-cta{flex-direction:column;align-items:stretch;gap:11px;padding:13px}.quote-cta .primary{width:100%}.quote-cta b{font-size:10px}.quote-cta span,.quote-cta small{font-size:9px}.compare-toolbar{flex-direction:column;align-items:flex-start}.compare-tabs{width:100%}.compare-tabs button{flex:1}.comparison-grid{grid-template-columns:1fr;gap:9px}.comparison-image{height:240px}.comparison-toggle .comparison-image{height:300px}.comparison-card figcaption{height:25px}}
