.hyuncode-page{background:radial-gradient(circle at 52% -15%,#4968e13d,transparent 36%),linear-gradient(180deg,#070a11,var(--background) 58%);min-height:100vh;padding:0 28px 28px}.hyuncode-header,.hyuncode-heading,.hyuncode-shell,.hyuncode-note,.hyuncode-footer{width:min(1480px,100%);margin-inline:auto}.hyuncode-heading{justify-content:space-between;align-items:end;gap:30px;padding:54px 0 30px;display:flex}.hyuncode-heading>div:first-child>span{color:#8da5ff;font:700 12px var(--font-geist-mono),monospace;letter-spacing:.15em;align-items:center;gap:8px;display:inline-flex}.hyuncode-heading h1{color:#f3f6fb;letter-spacing:-.065em;margin:12px 0;font-size:clamp(40px,5vw,64px);line-height:1.02}.hyuncode-heading h1 em{color:#7895ff;font-style:normal}.hyuncode-heading p{color:#8995a9;max-width:660px;margin:0;font-size:13px;line-height:1.7}.hyuncode-heading-actions{gap:9px;display:flex}.hyuncode-heading-actions button{color:#a5b0c4;height:42px;font-size:var(--font-size-meta);cursor:pointer;background:#0d121ed9;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:7px;padding:0 13px;font-weight:700;display:inline-flex}.hyuncode-heading-actions button:first-child{color:#a7b7fa;background:#3c54b024;border-color:#6b87ef45}.hyuncode-shell{background:#080b12;border:1px solid #718bef45;border-radius:20px;overflow:hidden;box-shadow:0 28px 80px #0000004d}.hyuncode-toolbar{background:linear-gradient(#101522,#0c101a);border-bottom:1px solid #ffffff14;grid-template-columns:minmax(180px,1fr) auto minmax(300px,1fr);align-items:center;gap:14px;min-height:60px;padding:9px 12px;display:grid}.hyuncode-toolbar>label:first-child input{color:#e8edf6;width:min(360px,100%);height:38px;font-size:var(--font-size-meta);background:0 0;border:1px solid #0000;border-radius:9px;outline:0;padding:0 11px;font-weight:700}.hyuncode-toolbar>label:first-child input:hover,.hyuncode-toolbar>label:first-child input:focus{background:#080c15;border-color:#738ef540}.hyuncode-toolbar-status{color:#6f7b90;font:12px var(--font-geist-mono),monospace;align-items:center;gap:7px;display:flex}.hyuncode-toolbar-status i{background:#4fc48a;border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #4fc48ab3}.hyuncode-toolbar-actions{justify-content:flex-end;align-items:center;gap:7px;display:flex}.hyuncode-live-toggle{color:#7c899d;height:36px;font-size:var(--font-size-meta);cursor:pointer;align-items:center;gap:7px;padding:0 9px;display:flex}.hyuncode-live-toggle input{opacity:0;pointer-events:none;position:absolute}.hyuncode-live-toggle>span{background:#2a3040;border-radius:20px;width:28px;height:16px;padding:2px;transition:all .2s}.hyuncode-live-toggle>span:after{content:"";background:#778197;border-radius:50%;width:12px;height:12px;transition:all .2s;display:block}.hyuncode-live-toggle input:checked+span{background:#4967d4}.hyuncode-live-toggle input:checked+span:after{background:#fff;transform:translate(12px)}.hyuncode-toolbar-actions button{color:#7e899c;height:36px;font-size:var(--font-size-meta);cursor:pointer;background:#ffffff06;border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:6px;padding:0 10px;display:inline-flex}.hyuncode-toolbar-actions button.run{color:#fff;background:linear-gradient(145deg,#6483f6,#4967d7);border-color:#627fec;padding-inline:15px;font-weight:800}.hyuncode-workspace{grid-template-columns:minmax(430px,.92fr) minmax(500px,1.08fr);height:min(760px,100vh - 190px);min-height:590px;display:grid}.hyuncode-editor-pane,.hyuncode-output-pane{min-width:0;min-height:0}.hyuncode-editor-pane{background:#090d15;border-right:1px solid #ffffff14;grid-template-rows:48px 42px 1fr;display:grid}.hyuncode-tabs{background:#0d111c;border-bottom:1px solid #ffffff12;display:flex;overflow-x:auto}.hyuncode-tabs button{color:#68758a;text-align:left;cursor:pointer;background:0 0;border:0;border-right:1px solid #ffffff0f;grid-template-columns:18px auto;align-content:center;column-gap:7px;min-width:145px;padding:0 13px;display:grid}.hyuncode-tabs button svg{grid-row:1/3;align-self:center;width:17px;height:17px}.hyuncode-tabs button span{font-size:var(--font-size-meta);font-weight:800}.hyuncode-tabs button small{font:12px var(--font-geist-mono),monospace}.hyuncode-tabs button[aria-selected=true]{color:#a9b9fb;background:#11182b;position:relative}.hyuncode-tabs button[aria-selected=true]:after{content:"";background:#6785f4;height:2px;position:absolute;bottom:0;left:0;right:0}.hyuncode-editor-heading,.hyuncode-preview-heading{color:#6c7890;font:12px var(--font-geist-mono),monospace;border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:0 13px;display:flex}.hyuncode-editor-heading>div{align-items:center;gap:12px;display:flex}.hyuncode-editor-heading button,.hyuncode-console header button{color:#718096;height:28px;font-size:var(--font-size-meta);cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:4px;padding:0 7px;display:inline-flex}.hyuncode-editor-heading button:hover,.hyuncode-console header button:hover{color:#b1bce0;background:#ffffff0d}.hyuncode-editor-wrap{grid-template-columns:48px 1fr;min-height:0;display:grid;overflow:hidden}.hyuncode-line-numbers{color:#3e485b;font:12px/1.65 var(--font-geist-mono),monospace;text-align:right;-webkit-user-select:none;user-select:none;background:#080b12;border-right:1px solid #ffffff0b;padding:15px 9px;overflow:hidden}.hyuncode-line-numbers span{display:block}.hyuncode-editor-wrap textarea{resize:none;color:#d8dfed;width:100%;height:100%;font:12px/1.65 var(--font-geist-mono),Consolas,monospace;tab-size:2;white-space:pre;background:#080b12;border:0;outline:0;padding:15px 17px;overflow:auto}.hyuncode-output-pane{background:#060910;grid-template-rows:42px minmax(260px,1fr) 230px;display:grid}.hyuncode-preview-heading>div{color:#8498e9;align-items:center;gap:7px;display:flex}.hyuncode-preview-heading svg{width:16px;height:16px}.hyuncode-output-pane iframe{background:#fff;border:0;width:100%;height:100%}.hyuncode-console{background:#090c13;border-top:1px solid #ffffff17;min-height:0}.hyuncode-console header{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;height:42px;padding:0 12px;display:flex}.hyuncode-console header>div{color:#8496d9;align-items:center;gap:7px;display:flex}.hyuncode-console header strong{color:#abb5c8;font-size:var(--font-size-meta)}.hyuncode-console header span{color:#67748c;font:12px var(--font-geist-mono),monospace;background:#171d2b;border-radius:10px;padding:2px 6px}.hyuncode-console-output{height:calc(100% - 42px);overflow:auto}.hyuncode-console-output>div{color:#4e596b;height:100%;font-size:var(--font-size-meta);align-content:center;place-items:center;gap:7px;display:grid}.hyuncode-console-output>div span{color:#7187dc;font:18px var(--font-geist-mono),monospace}.hyuncode-console-output p{color:#9aa6b9;font:12px/1.45 var(--font-geist-mono),monospace;border-bottom:1px solid #ffffff0a;grid-template-columns:42px 1fr;gap:8px;margin:0;padding:7px 12px;display:grid}.hyuncode-console-output p>span{color:#6f83ce;text-transform:uppercase}.hyuncode-console-output p[data-level=warn]{background:#9a6c1d12}.hyuncode-console-output p[data-level=warn]>span{color:#dda34c}.hyuncode-console-output p[data-level=error]{background:#9e3a3a17}.hyuncode-console-output p[data-level=error]>span{color:#e27373}.hyuncode-console-output code{white-space:pre-wrap;word-break:break-word}.hyuncode-note{background:#0c101bcc;border:1px solid #ffffff14;border-radius:14px;grid-template-columns:28px 1fr auto;align-items:center;gap:13px;margin-top:16px;padding:18px 20px;display:grid}.hyuncode-note>svg{color:#7896ff;width:24px;height:24px}.hyuncode-note strong{color:#dce3ef;font-size:var(--font-size-meta)}.hyuncode-note p{color:#748096;font-size:var(--font-size-meta);margin:4px 0 0}.hyuncode-note a{color:#9db0fa;font-size:var(--font-size-meta);background:#4860be17;border:1px solid #6c88ef40;border-radius:8px;padding:9px 11px;text-decoration:none}.hyuncode-footer{border-top:1px solid var(--border);color:#596375;font:12px var(--font-geist-mono),monospace;justify-content:space-between;margin-top:27px;padding-top:20px;display:flex}@media (width<=1050px){.hyuncode-workspace{grid-template-columns:1fr;height:auto;min-height:0}.hyuncode-editor-pane{border-bottom:1px solid #ffffff14;border-right:0;height:620px}.hyuncode-output-pane{height:700px}.hyuncode-heading{flex-direction:column;align-items:start}}@media (width<=680px){.hyuncode-page{padding-inline:14px}.hyuncode-heading{padding:42px 0 26px}.hyuncode-heading-actions{grid-template-columns:1fr 1fr;width:100%;display:grid}.hyuncode-heading-actions button{justify-content:center}.hyuncode-toolbar{grid-template-columns:1fr;padding:10px}.hyuncode-toolbar-status{grid-row:3}.hyuncode-toolbar-actions{justify-content:space-between}.hyuncode-toolbar-actions button span{display:none}.hyuncode-editor-pane{height:570px}.hyuncode-output-pane{grid-template-rows:42px minmax(260px,1fr) 210px;height:640px}.hyuncode-tabs button{min-width:120px}.hyuncode-note{grid-template-columns:25px 1fr}.hyuncode-note a{text-align:center;grid-column:1/-1}.hyuncode-footer{flex-direction:column;gap:8px}}@media (prefers-reduced-motion:reduce){.hyuncode-live-toggle>span,.hyuncode-live-toggle>span:after{transition:none}}.hyuncode-projectbar{background:linear-gradient(#12182a,#0d121f);border-bottom:1px solid #ffffff14;grid-template-columns:minmax(240px,1fr) auto minmax(430px,1fr);align-items:center;gap:16px;min-height:72px;padding:11px 13px;display:grid}.hyuncode-project-select{grid-template-columns:auto minmax(180px,340px);align-items:center;gap:10px;display:grid}.hyuncode-project-select>span{color:#7188e2;font:800 12px var(--font-geist-mono),monospace;letter-spacing:.14em}.hyuncode-projectbar .brand-select,.hyuncode-projectbar .brand-select-trigger{width:100%;height:39px}.hyuncode-project-limit{text-align:center;flex-direction:column;gap:3px;display:flex}.hyuncode-project-limit strong{color:#8da3ef;font-size:var(--font-size-meta)}.hyuncode-project-limit span{color:#626f85;font:12px var(--font-geist-mono),monospace}.hyuncode-project-create{grid-template-columns:minmax(180px,1fr) auto 38px 38px;align-items:center;gap:7px;display:grid}.hyuncode-project-create>button{color:#9fb1f9;height:38px;font-size:var(--font-size-meta);cursor:pointer;background:#455db91f;border:1px solid #6b87ef3d;border-radius:9px;justify-content:center;align-items:center;gap:6px;padding:0 11px;font-weight:750;display:inline-flex}.hyuncode-project-create>button:nth-last-child(-n+2){color:#78859a;background:#ffffff06;border-color:#ffffff14;padding:0}.hyuncode-project-create>button:disabled{opacity:.38;cursor:not-allowed}.hyuncode-project-message{color:#e0a65e;font-size:var(--font-size-meta);text-align:center;background:#7749141f;border-bottom:1px solid #e59d4633;margin:0;padding:9px 13px}.hyuncode-preview-heading small{text-overflow:ellipsis;white-space:nowrap;max-width:65%;overflow:hidden}@media (width<=1060px){.hyuncode-projectbar{grid-template-columns:1fr auto}.hyuncode-project-create{grid-column:1/-1}.hyuncode-project-select{grid-template-columns:auto minmax(180px,1fr)}}@media (width<=680px){.hyuncode-projectbar{grid-template-columns:1fr}.hyuncode-project-limit{text-align:left}.hyuncode-project-create{grid-template-columns:1fr 1fr 38px 38px}.hyuncode-project-create .brand-select{grid-column:1/-1}.hyuncode-project-select{grid-template-columns:1fr}.hyuncode-project-select>span{display:none}}.hyuncode-workspace{grid-template-columns:minmax(360px,var(--hyuncode-editor-width,46%)) 7px minmax(440px,1fr)}.hyuncode-resizer{z-index:2;cursor:col-resize;touch-action:none;background:#0b101a;border:0;border-left:1px solid #ffffff0a;border-right:1px solid #ffffff14;width:7px;min-width:7px;padding:0;position:relative}.hyuncode-resizer:after{content:"";background:#34405a;border-radius:4px;width:2px;height:40px;transition:all .18s;position:absolute;top:50%;left:2px;transform:translateY(-50%)}.hyuncode-resizer:hover:after,.hyuncode-resizer:focus-visible:after{background:#7390f7;box-shadow:0 0 14px #7390f7a6}.hyuncode-preview-heading>div:first-child{flex:1}.hyuncode-preview-controls{align-items:center;gap:3px;display:flex}.hyuncode-preview-controls button{color:#68758a;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;width:29px;height:28px;padding:0;display:grid}.hyuncode-preview-controls button:hover{color:#a8b5ce;background:#ffffff0a}.hyuncode-preview-controls button[aria-pressed=true]{color:#a8b9ff;background:#4860be29;border-color:#6b87ef40}.hyuncode-preview-controls svg{width:15px;height:15px}.hyuncode-output-pane{grid-template-rows:42px minmax(260px,1fr) 230px}.hyuncode-preview-stage{background:#05070c;justify-content:center;min-width:0;min-height:0;display:flex;overflow:auto}.hyuncode-preview-stage iframe{border-left:1px solid #ffffff14;border-right:1px solid #ffffff14;flex:none;width:100%;height:100%;transition:width .24s}.hyuncode-preview-stage[data-size=tablet] iframe{width:min(768px,100%)}.hyuncode-preview-stage[data-size=mobile] iframe{width:min(390px,100%)}.hyuncode-editor-heading button{white-space:nowrap}.hyuncode-console-output p>span{flex-direction:column;gap:2px;display:flex}.hyuncode-console-output p>span small{color:#e18585;font:12px var(--font-geist-mono),monospace;text-transform:none}.hyuncode-workspace.is-focused{z-index:1000;background:#080b12;border:1px solid #7390f75c;border-radius:16px;width:auto;height:auto;min-height:0;position:fixed;inset:12px;overflow:hidden;box-shadow:0 24px 100px #000}.hyuncode-workspace.is-focused:before{content:"집중 모드 · Ctrl + Shift + F로 종료";z-index:1002;color:#8fa4ee;font:12px var(--font-geist-mono),monospace;pointer-events:none;background:#0c1221;border:1px solid #7390f740;border-radius:8px;padding:7px 10px;position:fixed;bottom:20px;right:24px}@media (width<=1050px){.hyuncode-workspace{grid-template-columns:1fr}.hyuncode-resizer{display:none}.hyuncode-workspace.is-focused{grid-template-rows:minmax(360px,1fr) minmax(360px,1fr);display:grid;inset:8px;overflow:auto}.hyuncode-workspace.is-focused .hyuncode-editor-pane,.hyuncode-workspace.is-focused .hyuncode-output-pane{height:auto}}@media (width<=680px){.hyuncode-heading-actions{grid-template-columns:1fr 1fr}.hyuncode-heading-actions button:first-child{grid-column:1/-1}.hyuncode-editor-heading>div{gap:4px}.hyuncode-editor-heading small{display:none}.hyuncode-workspace.is-focused{border:0;border-radius:0;inset:0}.hyuncode-workspace.is-focused:before{display:none}}@media (prefers-reduced-motion:reduce){.hyuncode-preview-stage iframe,.hyuncode-resizer:after{transition:none}}