*{box-sizing:border-box}:root{--blue: #1a56db;--blue-dark: #1442a8;--ink: #101828;--sub: #667085;--line: #e4e7ec;--bg: #f8fafc}html,body,#root{height:100%;margin:0}body{font-family:Pretendard,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif;color:var(--ink);background:var(--bg)}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.logo{background:var(--blue);color:#fff;font-weight:800;font-size:13px;padding:8px 10px;border-radius:8px;letter-spacing:.5px}.brand h1{font-size:17px;margin:0}.brand p{font-size:12px;color:var(--sub);margin:2px 0 0}.actions{display:flex;gap:8px;align-items:center}.filename{border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13px;width:160px;background:#fff}.filename:focus{outline:2px solid var(--blue);outline-offset:-1px}button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer}button:hover{background:#f2f4f7}button.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;padding:9px 18px}button.primary:hover{background:var(--blue-dark)}button:disabled{opacity:.6;cursor:default}.panes{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 20px;min-height:0}.pane{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;min-height:0;overflow:hidden}.pane-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}.pane-head h2{font-size:13px;margin:0;color:var(--sub);font-weight:600}.pane-head .hint{font-weight:400;font-size:12px}.pane-tools{display:flex;gap:6px}.pane-tools button{padding:5px 10px;font-size:12px}textarea{flex:1;border:0;resize:none;padding:14px;font-size:13px;line-height:1.6;font-family:SF Mono,D2Coding,Menlo,Consolas,monospace;min-height:0}textarea:focus{outline:none}.pane-foot{padding:6px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--sub);min-height:27px}.preview-wrap{flex:1;overflow:auto;background:#eceef2;padding:18px;min-height:0;display:flex;justify-content:center;align-items:flex-start}.preview-wrap iframe{border:0;background:#fff;min-height:720px;flex-shrink:0;box-shadow:0 2px 14px #1018281f;border-radius:4px}.statusbar{padding:10px 20px;background:#fff;border-top:1px solid var(--line);font-size:12px;min-height:40px}.status.ok{color:#067647;font-weight:600}.status.error{color:#d92d20;font-weight:600}.status.busy{color:var(--blue)}.status.idle{color:var(--sub)}.warnings{margin:6px 0 0;padding:0;list-style:none;color:#b54708}.warnings li{margin-top:2px}@media(max-width:900px){.panes{grid-template-columns:1fr}}