:root{--ink: #13282f;--muted: #65757a;--accent: #087d77;--accent-dark: #05625e;--accent-soft: #d9efec;--paper: #f3f7f6;--surface: #ffffff;--code: #10272d;--code-muted: #91aaa9;--line: #cfdddb;--focus: #55bdb5;--font-display: "Avenir Next", Avenir, "Segoe UI", sans-serif;--font-body: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;--font-code: "SFMono-Regular", Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body)}button,textarea{font:inherit}button{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.site-header,main,.site-footer{width:min(1440px,calc(100% - 48px));margin-inline:auto}.site-header{min-height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.site-header>p{color:var(--muted);font-size:.78rem}.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand-mark{display:grid;min-width:38px;height:30px;place-items:center;border-radius:7px;background:var(--ink);color:#fff;font:800 .78rem/1 var(--font-code)}.brand strong{font:800 1.05rem/1 var(--font-display);letter-spacing:-.04em}.brand>span:last-child{padding-left:10px;border-left:1px solid var(--line);color:var(--muted);font-size:.74rem}.top-ad-shell{position:relative;width:min(1440px,calc(100% - 48px));min-height:122px;display:grid;place-items:center;margin:20px auto}.ad-label{position:absolute;top:10px;left:12px;color:#879794;font:700 .6rem/1 var(--font-code);letter-spacing:.1em}.kakao_ad_area{width:728px;height:90px}.mobile-tabs{display:none}.workspace{display:grid;grid-template-columns:1fr 1fr;height:680px;min-height:0;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:0 18px 50px #12373c14}.panel{min-width:0;min-height:0;display:flex;flex-direction:column}.panel+.panel{border-left:1px solid var(--line)}.panel-heading{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 20px;border-bottom:1px solid var(--line);background:#fbfdfc}.panel-kicker{color:var(--accent);font:800 .62rem/1 var(--font-code);letter-spacing:.13em}.panel-heading h2{margin:5px 0 0;font:750 1rem/1.1 var(--font-display);letter-spacing:-.025em}.panel-heading button,.panel-toolbar button{min-height:36px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);padding:0 11px;font-size:.76rem;font-weight:700}.panel-heading button:hover,.panel-toolbar button:hover{border-color:var(--accent);color:var(--accent-dark)}.save-status{color:var(--muted);font-size:.72rem}.code-editor-host{flex:1;min-height:0;overflow:hidden;background:var(--code)}.code-editor-host .cm-editor{height:100%;min-height:0;background:var(--code);color:#e6f2f0;font:500 .84rem/1.75 var(--font-code)}.code-editor-host .cm-scroller{overflow:auto;font-family:inherit}.code-editor-host .cm-content{padding:20px 0 28px;caret-color:#f7fbfa}.code-editor-host .cm-line{padding:0 24px 0 8px}.code-editor-host .cm-gutters{border:0;background:#102a31;color:#688086}.code-editor-host .cm-activeLine,.code-editor-host .cm-activeLineGutter{background:#74c9be14}.code-editor-host .cm-selectionBackground,.code-editor-host .cm-content ::selection{background:#285860!important}.code-editor-host .cm-cursor{border-left-color:#f5a58f}.code-editor-host .cm-focused{outline:3px solid var(--focus);outline-offset:-3px}.code-editor-host .cm-tooltip{border:1px solid #35545a;background:#f8fbfa;color:var(--ink);font-family:var(--font-code)}.code-editor-host .cm-tooltip-autocomplete>ul>li[aria-selected]{background:var(--accent);color:#fff}.panel-toolbar{min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px 8px 18px;border-top:1px solid #284249;background:var(--code);color:var(--code-muted);font:600 .7rem/1 var(--font-code)}.panel-toolbar div{display:flex;gap:7px}.panel-toolbar button{border-color:#3b555b;background:#19343b;color:#d6e7e5}.browser-frame{flex:1;min-height:0;display:flex;flex-direction:column;background:#e8efee}.browser-bar{min-height:40px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line);background:#f5f8f7}.browser-bar i{width:8px;height:8px;border-radius:50%;background:#b6c7c5}.browser-bar i:first-child{background:#e47863}.browser-bar span{margin-left:10px;color:#82918f;font:600 .64rem/1 var(--font-code)}.browser-frame iframe{flex:1;width:100%;border:0;background:#fff}.runtime-error{margin:0;padding:10px 18px;border-top:1px solid #efb7ad;background:#fff0ed;color:#9a2d1e;font-size:.78rem}.privacy-section{display:grid;grid-template-columns:72px minmax(0,1fr);gap:28px;margin:88px 0;padding:38px;background:var(--accent-soft)}.privacy-symbol{display:grid;width:58px;height:58px;place-items:center;border-radius:16px;background:var(--accent);color:#fff;font-size:1.4rem;font-weight:900}.privacy-section h2{margin:0;font:750 clamp(1.6rem,3vw,2.5rem)/1.15 var(--font-display);letter-spacing:-.045em}.privacy-section ul{display:flex;flex-wrap:wrap;gap:8px 24px;margin:18px 0 0;padding:0;color:#355d5b;list-style:none;font-size:.86rem}.privacy-section li:before{color:var(--accent);content:"— "}.faq{margin-bottom:100px}.faq>p{color:var(--accent);font:800 .7rem/1 var(--font-code);letter-spacing:.14em}.faq h2{margin:12px 0 28px;font:750 clamp(1.8rem,3vw,2.8rem)/1.1 var(--font-display);letter-spacing:-.045em}.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{padding:20px 0;font-weight:750;cursor:pointer}.faq details p{max-width:760px;margin:-4px 0 22px;color:var(--muted);line-height:1.7}.site-footer{min-height:130px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}.site-footer strong{display:block;margin-bottom:7px;color:var(--ink);font:800 1rem/1 var(--font-display)}.site-footer p{margin:0}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}@media(max-width:760px){.site-header,main,.site-footer{width:min(100% - 28px,1440px)}.top-ad-shell{display:none}.site-header>p,.brand>span:last-child{display:none}.mobile-tabs{display:grid;grid-template-columns:1fr 1fr;margin:14px 0 10px;border:1px solid var(--line)}.mobile-tabs button{min-height:46px;border:0;background:var(--surface);color:var(--muted);font-weight:750}.mobile-tabs button[aria-selected=true]{background:var(--ink);color:#fff}.workspace{display:block;height:650px;min-height:0}.workspace.mobile-editor .preview-panel,.workspace.mobile-preview .editor-panel{display:none}.panel+.panel{border-left:0}.editor-panel,.preview-panel{height:100%}.privacy-section{grid-template-columns:1fr;margin:60px 0;padding:28px}.privacy-section ul{display:grid}.site-footer{min-height:150px;align-items:flex-start;flex-direction:column;justify-content:center;gap:18px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}