@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{font-family:"DM Sans","Noto Sans KR",sans-serif;color:#1a2633;background:#f7fafc;--accent:#326bdf;--soft:#eaf1ff;--ink:#1a2633}
*{box-sizing:border-box}body{margin:0;line-height:1.6;background:radial-gradient(circle at 82% 3%,var(--soft),transparent 36%),#f7fafc}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}
.shell{max-width:1080px;margin:auto;padding:0 26px}
.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:800;letter-spacing:-.8px}
.brandmark{width:41px;height:41px;background:var(--accent);color:#fff;display:grid;place-items:center;border-radius:14px;font-size:24px}
.menu{display:flex;gap:24px;align-items:center;font-size:14px;color:#5a6673;font-weight:600}
.menu a:hover,.tool-links a:hover{color:var(--accent)}
.smallpill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #dfe6ed;border-radius:40px;padding:9px 14px;font-size:12px;color:#516376;font-weight:700}
.smallpill:before{content:"";width:7px;height:7px;background:#31be93;border-radius:50%}
.hero{padding:62px 0 37px;display:grid;grid-template-columns:1fr 270px;align-items:center;gap:32px}
.kicker{font-size:12px;font-weight:800;letter-spacing:1.8px;color:var(--accent);text-transform:uppercase}
h1{font-size:clamp(35px,5vw,53px);line-height:1.18;margin:17px 0;letter-spacing:-2px;font-weight:800;word-break:keep-all}
.lead{color:#617084;font-size:16px;line-height:1.85;max-width:640px;margin:0}
.hero-icon{display:grid;place-items:center;background:linear-gradient(145deg,#fff,var(--soft));border:1px solid #dfe6ee;border-radius:37px;height:230px;box-shadow:0 28px 65px #263b5c12;font-size:100px;color:var(--accent);transform:rotate(3deg);position:relative}
.hero-icon:before{content:"✦";position:absolute;top:17px;right:26px;font-size:25px;opacity:.4}.hero-icon:after{content:"✳";position:absolute;bottom:21px;left:25px;font-size:21px;opacity:.3}
.workspace{background:#fff;border:1px solid #e0e7ef;border-radius:24px;box-shadow:0 18px 55px #263b5c0b;overflow:hidden}
.workspace-head{border-bottom:1px solid #eef1f5;padding:22px 30px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.workspace-head h2{margin:0;font-size:19px;letter-spacing:-.5px}
.subtle{font-size:12px;color:#8795a3}.workspace-body{padding:30px}
.cols{display:grid;grid-template-columns:1.1fr .9fr;gap:32px}
.stack{display:flex;flex-direction:column;gap:19px}
.field{display:flex;flex-direction:column;gap:8px}.field label,.field .fieldname{font-size:13px;font-weight:800;color:#405165}
.field input:not([type=color]):not([type=range]):not([type=file]),.field textarea,.field select{width:100%;border:1px solid #dfe7f0;background:#fff;border-radius:12px;padding:13px 14px;outline:none;color:#243449}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.field textarea{min-height:128px;resize:vertical}
.field input[type=range]{width:100%;accent-color:var(--accent)}
.field input[type=color]{height:44px;width:100%;border:1px solid #e2e8f0;background:#fff;border-radius:10px;padding:5px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border:1px solid #dfe6ee;border-radius:12px;background:white;color:#334155;font-weight:800;transition:.15s ease;min-height:47px}
.btn.primary{background:var(--accent);color:white;border-color:var(--accent)}
.btn:hover{transform:translateY(-1px);filter:brightness(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.preview{background:#f7faff;border:1px dashed #d7e3f5;border-radius:20px;padding:23px;min-height:310px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;text-align:center}
.preview b{font-size:14px}.preview small{color:#8795a3;font-size:12px}
.drop{padding:35px 22px;border:2px dashed #cfdbed;border-radius:18px;background:#f8faff;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;transition:.15s}
.drop.drag,.drop:hover{border-color:var(--accent);background:var(--soft)}
.drop strong{font-size:17px}.drop span{font-size:12px;color:#7c8b9d}.drop .glyph{font-size:43px;line-height:1;color:var(--accent)}
.status{color:#66778b;font-size:12px;min-height:20px;white-space:pre-line}.status.error{color:#bc3654}
.result{background:#f8fafc;padding:14px 16px;border-radius:12px;color:#53667a;font-size:13px}
.section-title{font-size:23px;letter-spacing:-.8px;margin:52px 0 13px}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:30px}
.help-grid article{border:1px solid #e6ecf3;border-radius:15px;background:#fff;padding:22px}.help-grid b{font-size:15px}.help-grid p{font-size:13px;color:#6c7c8e;line-height:1.75;margin:9px 0 0}
.ad-slot{border:1px solid #e6ebef;min-height:100px;border-radius:14px;background:#fff;display:grid;place-items:center;text-align:center;color:#a4afbd;font-size:12px;letter-spacing:.2px;margin:32px 0}
.tool-links{padding:23px 0 28px;display:flex;justify-content:space-between;gap:15px;border-top:1px solid #e3e8f1;font-size:12px;color:#738095}
.tool-links .links{display:flex;gap:16px;flex-wrap:wrap}
.tabbar{display:flex;gap:8px;margin-bottom:22px}.tab{border:1px solid #dce5ee;padding:11px 17px;border-radius:12px;background:#fff;font-weight:700;color:#65758b}.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.filelist{max-height:190px;overflow:auto;border:1px solid #e4eaf2;border-radius:12px;margin:14px 0}.filelist div{padding:10px 14px;border-bottom:1px solid #edf1f5;font-size:12px;color:#58687a;display:flex;justify-content:space-between;gap:10px}.filelist div:last-child{border:0}
.hidden{display:none!important}
.extra-faq{margin:8px 0 42px}.extra-faq h2{font-size:23px;letter-spacing:-.7px;margin:0 0 17px}.extra-faq details{border:1px solid #e1e8f0;background:#fff;border-radius:13px;padding:0 18px;margin:10px 0}.extra-faq summary{padding:15px 20px 15px 0;position:relative;font-weight:700;font-size:14px;cursor:pointer;list-style:none}.extra-faq summary::-webkit-details-marker{display:none}.extra-faq summary:after{content:"+";position:absolute;right:0;top:12px;color:var(--accent);font-size:21px;font-weight:400}.extra-faq details[open] summary:after{content:"−"}.extra-faq details p{font-size:13px;color:#61748a;line-height:1.9;margin:0;padding:0 0 17px}.extra-faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:760px){.shell{padding:0 16px}.topbar{height:74px}.menu{display:none}.hero{grid-template-columns:1fr;padding:30px 0 24px}.hero-icon{display:none}h1{letter-spacing:-1.3px}.workspace-head{padding:20px}.workspace-body{padding:20px}.cols{grid-template-columns:1fr;gap:25px}.help-grid{grid-template-columns:1fr}.tool-links{flex-direction:column}.field-row{gap:11px}.preview{min-height:240px}}