@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap'); /* ═══════════════════════════════════════════ DESIGN TOKENS — Premium Dark Theme Inspired by Linear, Vercel, Raycast ═══════════════════════════════════════════ */ :root { /* Backgrounds — subtle depth layering */ --bg-0: #09090b; --bg-1: #0c0c0f; --bg-2: #131316; --bg-3: #1a1a1f; --bg-4: #222228; --bg-hover: #1e1e24; --bg-elevated: #161619; /* Borders — two levels */ --bdr: rgba(255,255,255,.06); --bdr2: rgba(255,255,255,.1); /* Text — 4-level hierarchy */ --txt: #ededf0; --txt2: #a0a0ab; --txt3: #6b6b76; --txt4: #46464f; /* Accent — refined purple */ --accent: #8b5cf6; --accent2: #a78bfa; --accent3: #c4b5fd; --acc-s: rgba(139,92,246,.1); --acc-g: rgba(139,92,246,.15); --acc-border: rgba(139,92,246,.2); /* Semantic colors */ --grn: #34d399; --grn-s: rgba(52,211,153,.08); --red: #f87171; --red-s: rgba(248,113,113,.08); --ylw: #fbbf24; --ylw-s: rgba(251,191,36,.08); --blu: #60a5fa; --blu-s: rgba(96,165,250,.08); /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* Radii */ --r: 12px; --r-lg: 16px; --rs: 8px; --rx: 6px; /* Typography */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* Shadows */ --sh-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.15); --sh-md: 0 4px 16px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2); --sh-lg: 0 12px 48px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.2); --sh-xl: 0 24px 80px rgba(0,0,0,.55); --sh-glow: 0 0 48px rgba(139,92,246,.12); /* Transitions */ --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(0,0,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); } html.locale-ko{ --font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', sans-serif; } html.locale-ko, html.locale-ko body{ height:auto; min-height:100%; overflow:auto; background:#fff; } /* ═══ Reset & Global ═══ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{ height:100%; font-family:var(--font); background:var(--bg-0); color:var(--txt); font-size:14px; overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:'cv02','cv03','cv04','cv11'; } :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--rx)} ::selection{background:rgba(139,92,246,.3);color:#fff} .hidden{display:none!important} /* Hide locale-dependent text on KO sessions until applyI18n() swaps it (cleared via removeAttribute('data-i18n-pending')). Uses visibility so layout doesn't shift between pre-paint and post-translation. */ html.locale-ko[data-i18n-pending] .hero-h1, html.locale-ko[data-i18n-pending] .hero-p, html.locale-ko[data-i18n-pending] #land-send, html.locale-ko[data-i18n-pending] .tpl-pill, html.locale-ko[data-i18n-pending] .land-foot-text{visibility:hidden} html.locale-ko[data-i18n-pending] #land-prompt::placeholder{color:transparent} /* Pre-paint view routing — inline script sets html[data-initial-view] before the stylesheet parses, so hard-refresh on a hash route paints the right view immediately instead of flashing the landing page first. Once app.js runs and starts toggling .hidden, the [data-initial-view] rule still wins for the chosen view (specificity + !important), but app.js explicitly removes the attribute so the SPA navigation works afterwards. */ html[data-initial-view="workspace"] #v-landing, html[data-initial-view="dashboard"] #v-landing, html[data-initial-view="admin"] #v-landing{display:none!important} html[data-initial-view="workspace"] #v-workspace{display:flex!important} html[data-initial-view="dashboard"] #v-dashboard{display:flex!important} html[data-initial-view="admin"] #v-admin{display:flex!important} .hide-m{} .hide-d{display:none!important} /* Scrollbars */ ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.14)} *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.08) transparent} /* ═══════════════════════════════════════════ TOAST NOTIFICATIONS ═══════════════════════════════════════════ */ .toast-container{position:fixed;top:var(--sp-4);right:var(--sp-4);z-index:9999;display:flex;flex-direction:column;gap:var(--sp-2);pointer-events:none} .lang-switcher{position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center} .lang-switcher select{appearance:none;width:auto;height:32px;background:rgba(10,10,14,.86);border:1px solid rgba(255,255,255,.13);border-radius:8px;color:var(--txt2);font:600 12px/1 var(--font);padding:0 28px 0 10px;box-shadow:var(--sh);backdrop-filter:blur(12px);cursor:pointer} .lang-switcher::after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--txt4);border-bottom:1.5px solid var(--txt4);transform:translateY(-65%) rotate(45deg);pointer-events:none} .toast{ display:flex;align-items:center;gap:10px; padding:12px 18px; background:var(--bg-elevated); border:1px solid var(--bdr2); border-radius:var(--r); font-size:13px;font-weight:500; color:var(--txt); box-shadow:var(--sh-lg); pointer-events:auto; opacity:0;transform:translateX(24px) scale(.97); transition:all .35s var(--ease); backdrop-filter:blur(16px) saturate(180%); } .toast-in{opacity:1;transform:translateX(0) scale(1)} .toast-out{opacity:0;transform:translateX(24px) scale(.97)} .toast-icon{flex-shrink:0;display:flex} .toast-success .toast-icon{color:var(--grn)}.toast-error .toast-icon{color:var(--red)}.toast-warning .toast-icon{color:var(--ylw)}.toast-info .toast-icon{color:var(--blu)} .toast-success{border-color:rgba(52,211,153,.2)}.toast-error{border-color:rgba(248,113,113,.2)}.toast-warning{border-color:rgba(251,191,36,.2)} /* ═══════════════════════════════════════════ MODALS ═══════════════════════════════════════════ */ .modal-overlay{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(8px) saturate(150%)} .modal{background:var(--bg-2);border:1px solid var(--bdr2);border-radius:var(--r-lg);padding:var(--sp-8);max-width:420px;width:90%;box-shadow:var(--sh-xl);animation:modalIn .3s var(--ease)} @keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}} .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)} .modal-header h3{font-size:16px;font-weight:600;letter-spacing:-.02em} .modal-close{background:none;border:none;color:var(--txt3);font-size:20px;cursor:pointer;padding:4px;border-radius:var(--rx);transition:all .15s} .modal-close:hover{color:var(--txt);background:var(--bg-3)} .modal-title{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:var(--sp-2)} .modal-desc{font-size:13px;color:var(--txt3);line-height:1.65;margin-bottom:var(--sp-6);white-space:pre-wrap} .modal-actions{display:flex;gap:var(--sp-2);justify-content:flex-end} .modal-btn{font-family:var(--font);font-size:13px;font-weight:500;padding:8px 16px;border-radius:var(--rs);cursor:pointer;transition:all .2s var(--ease);border:1px solid var(--bdr2);color:var(--txt);background:var(--bg-3)} .modal-btn:hover{background:var(--bg-4);border-color:var(--bdr2)} .modal-btn-primary{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(139,92,246,.25)} .modal-btn-primary:hover{background:#7c3aed;box-shadow:0 4px 16px rgba(139,92,246,.3)} .modal-btn-danger{background:var(--red-s);border-color:rgba(248,113,113,.15);color:var(--red)} .modal-btn-danger:hover{background:rgba(248,113,113,.15)} .modal-kb{max-width:480px} .kb-grid{display:flex;flex-direction:column;gap:2px} .kb-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bdr)} .kb-row:last-child{border:none} .kb-keys{display:flex;gap:4px} .kb-keys kbd{display:inline-block;padding:3px 8px;font-family:var(--mono);font-size:11px;color:var(--txt2);background:var(--bg-3);border:1px solid var(--bdr2);border-radius:var(--rx);line-height:1.3;box-shadow:0 1px 0 var(--bdr)} .kb-desc{font-size:13px;color:var(--txt3)} /* ═══════════════════════════════════════════ VIEWS ═══════════════════════════════════════════ */ .view{height:100vh;display:flex;flex-direction:column} /* ═══════════════════════════════════════════ LANDING PAGE — bolt.new Style (Deep Dark + Neon) ═══════════════════════════════════════════ */ .land-view{background:#0a0a0a;color:#ededed;overflow:hidden;position:relative} /* Aurora / neon glow background */ .land-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden} .aurora{position:absolute;border-radius:50%;filter:blur(100px);mix-blend-mode:screen;opacity:.35} .aurora-1{width:600px;height:600px;background:linear-gradient(135deg,#6366f1,#06b6d4);top:-200px;left:30%;animation:aur 14s ease-in-out infinite} .aurora-2{width:500px;height:500px;background:linear-gradient(135deg,#a855f7,#ec4899);bottom:-150px;right:10%;animation:aur 18s ease-in-out infinite reverse} .aurora-3{width:400px;height:400px;background:linear-gradient(135deg,#22d3ee,#3b82f6);top:40%;left:-100px;animation:aur 20s ease-in-out infinite 2s;opacity:.2} @keyframes aur{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,30px) scale(.95)}} .noise{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");background-repeat:repeat;background-size:128px} /* Nav */ .land-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 36px;position:relative;z-index:2} .brand{display:flex;align-items:center;gap:0} .brand-mark{ width:28px;height:28px; background:transparent; border:none; border-radius:0; display:flex;align-items:center;justify-content:center; transition:all .4s var(--ease); position:relative; transform:translateY(1px); margin-right:2px; } .brand-mark:hover{ transform:scale(1.1) rotate(3deg); } .brand-word{font-size:16px;font-weight:700;letter-spacing:-.03em;color:#ededed} .nav-right{display:flex;align-items:center;gap:6px} .nav-pill{font-family:var(--font);font-size:13px;font-weight:500;color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:7px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:5px;backdrop-filter:blur(8px)} .nav-pill:hover{color:#ededed;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15)} .nav-icon-pill{padding:7px 9px} /* Hero */ .land-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 32px;position:relative;z-index:2;gap:28px} .hero-h1{font-size:clamp(42px,7vw,80px);font-weight:800;line-height:1.02;text-align:center;letter-spacing:-.05em;color:#fff} .hero-glow{ background:linear-gradient(90deg,#818cf8,#06b6d4,#a855f7,#818cf8); background-size:300% 100%; -webkit-background-clip:text;-webkit-text-fill-color:transparent; background-clip:text; animation:neonShift 4s linear infinite; } @keyframes neonShift{0%{background-position:0% 50%}100%{background-position:300% 50%}} .hero-p{font-size:18px;color:rgba(255,255,255,.45);text-align:center;line-height:1.65;max-width:560px;letter-spacing:-.01em} /* Prompt card — glass morphism */ .prompt-card{ width:100%;max-width:700px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:20px; box-shadow:0 4px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(20px) saturate(150%); transition:all .35s var(--ease); overflow:hidden; } .prompt-card.pulse{animation:ppulse .5s var(--ease-spring)} @keyframes ppulse{0%,100%{transform:scale(1)}50%{transform:scale(1.008);box-shadow:0 0 60px rgba(99,102,241,.15)}} .prompt-card:focus-within{border-color:rgba(129,140,248,.4);box-shadow:0 0 0 3px rgba(99,102,241,.12),0 8px 48px rgba(0,0,0,.3)} .land-view .prompt-ta{ width:100%;min-height:100px;max-height:200px; background:transparent;border:none;border-radius:0; outline:none;resize:none; color:#ededed;font-family:var(--font);font-size:16px;line-height:1.6; padding:22px 24px 8px; } .land-view .prompt-ta:focus{box-shadow:none} .land-view .prompt-ta::placeholder{color:rgba(255,255,255,.25)} .land-view .land-upload-preview{padding:8px 20px;border-bottom:none;background:transparent} .prompt-actions{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 16px 22px;border-top:1px solid rgba(255,255,255,.06)} .prompt-left{display:flex;align-items:center;gap:12px} .prompt-icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:rgba(255,255,255,.35);cursor:pointer;transition:all .2s} .prompt-icon-btn:hover{color:#818cf8;border-color:rgba(129,140,248,.3);background:rgba(99,102,241,.1)} .prompt-shortcut{font-size:11px;color:rgba(255,255,255,.2);display:flex;align-items:center;gap:3px} .prompt-shortcut kbd{display:inline-block;padding:2px 6px;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.3);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:4px;line-height:1.3} .prompt-go{ display:flex;align-items:center;gap:8px; padding:11px 24px; background:linear-gradient(135deg,#6366f1,#818cf8); color:#fff;border:none;border-radius:12px; font-family:var(--font);font-size:14px;font-weight:600; cursor:pointer;transition:all .25s var(--ease); box-shadow:0 0 24px rgba(99,102,241,.3),inset 0 1px 0 rgba(255,255,255,.15); letter-spacing:-.01em; } .prompt-go:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(99,102,241,.45),inset 0 1px 0 rgba(255,255,255,.15)} .prompt-go:active{transform:translateY(0) scale(.98)} /* Template pills — neon ghost style */ .tpl-section{width:100%;max-width:900px;margin-top:10px;overflow:visible} .tpl-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px;padding:0 4px} .tpl-section-title{font-size:15px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:-.01em} .tpl-section-sub{font-size:12px;color:rgba(255,255,255,.45);margin:0 0 14px;padding:0 4px} .tpl-section-all{background:transparent;border:none;color:rgba(129,140,248,.85);font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;font-family:inherit;transition:color .15s} .tpl-section-all:hover{color:rgba(165,180,252,1)} .tpl-grid{display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow:visible} .tpl-pill{ font-family:var(--font);font-size:13px;font-weight:500; color:rgba(255,255,255,.4); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:100px; padding:8px 20px;cursor:pointer; transition:all .25s;white-space:nowrap; backdrop-filter:blur(8px); } .tpl-pill:hover{color:rgba(255,255,255,.8);border-color:rgba(129,140,248,.3);background:rgba(99,102,241,.08);box-shadow:0 0 16px rgba(99,102,241,.1)} .tpl-pill:active{transform:scale(.97)} /* Templates browser (modal) */ .ko-pane.ko-pane-w .ko-pane-inner{max-width:1080px} .ko-pane.ko-pane-w .ko-pane-tpl{max-width:1080px} .ko-pane.ko-pane-w .ko-pane-body{padding:0} .ko-tpl-modal{font-family:var(--font);background:#fff;border-radius:18px;overflow:hidden} .ko-tpl-head{padding:32px 36px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;border-bottom:1px solid #f1f5f9} .ko-tpl-head h2{font-size:24px;font-weight:850;letter-spacing:-.025em;color:#0f172a;margin:0 0 4px} .ko-tpl-head p{font-size:13.5px;color:#64748b;margin:0;line-height:1.55;max-width:560px} .ko-tpl-grid{padding:24px 36px 36px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;background:#fafbfc} .ko-tpl-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;text-align:left} .ko-tpl-card:hover{transform:translateY(-3px);border-color:#cbd5e1;box-shadow:0 18px 38px rgba(15,23,42,.08)} .ko-tpl-card.loading{pointer-events:none;opacity:.65} .ko-tpl-thumb{position:relative;aspect-ratio:240/140;background:#f1f5f9;border-bottom:1px solid #e2e8f0;overflow:hidden} .ko-tpl-thumb svg{display:block;width:100%;height:100%} .ko-tpl-thumb-img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;background:#f1f5f9} .ko-tpl-thumb-fallback{width:100%;height:100%} .ko-tpl-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1} .ko-tpl-icon{width:24px;height:24px;border-radius:6px;background:color-mix(in srgb,var(--acc,#6366f1) 14%,transparent);color:var(--acc,#6366f1);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .ko-tpl-icon svg{width:14px;height:14px} .ko-tpl-name{display:flex;align-items:center;gap:9px;font-size:15.5px;font-weight:800;color:#0f172a;letter-spacing:-.015em} .ko-tpl-desc{margin:0;font-size:12.5px;color:#64748b;line-height:1.55;flex:1} .ko-tpl-tag{margin:0;font-size:11px;color:#94a3b8;font-weight:600} .ko-tpl-cta{margin-top:6px;align-self:flex-start;padding:8px 14px;border:none;background:var(--acc,#6366f1);color:#fff;border-radius:9px;font:700 12.5px/1 var(--font);cursor:pointer;transition:all .15s} .ko-tpl-cta:hover{filter:brightness(.93);transform:translateY(-1px);box-shadow:0 8px 18px color-mix(in srgb,var(--acc,#6366f1) 35%,transparent)} @media (max-width:680px){ .ko-tpl-head{padding:24px 22px 14px;gap:14px} .ko-tpl-grid{padding:18px 22px 28px;grid-template-columns:1fr;gap:14px} } /* Footer */ .land-foot{padding:14px 140px 14px 20px;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;border-top:1px solid rgba(255,255,255,.06);margin:0 36px;font-size:12px;color:rgba(255,255,255,.32);font-weight:500;text-align:center} .land-foot-text{white-space:nowrap} .land-foot-links a{color:#475569;text-decoration:none;margin:0 2px} .land-foot-links a:hover{color:#0f172a;text-decoration:underline} .land-foot-links a strong{font-weight:700;color:#0f172a} .foot-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.16)} /* Upload chip dark overrides */ .land-view .upload-files{display:flex;flex-wrap:wrap;gap:6px} .land-view .upload-chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.6)} .land-view .upload-chip-remove:hover{color:#f87171} /* =================================================================== Korean locale: light theme. Override design tokens at the .locale-ko scope so the workspace, dashboard, and admin views automatically pick up a light palette that matches the Korean landing page's tone & manner. The landing itself uses hardcoded colors (defined below) and is unaffected. =================================================================== */ .locale-ko { --bg-0: #f6f7fb; --bg-1: #ffffff; --bg-2: #ffffff; --bg-3: #f3f5f9; --bg-4: #e9edf3; --bg-hover: #eef2f8; --bg-elevated: #ffffff; --bdr: #e6eaf0; --bdr2: #d9dde6; --txt: #0f172a; --txt2: #475569; --txt3: #64748b; --txt4: #94a3b8; --accent: #2563eb; --accent2: #1d4ed8; --accent3: #93c5fd; --acc-s: rgba(37,99,235,.08); --acc-g: rgba(37,99,235,.12); --acc-border: rgba(37,99,235,.22); --grn: #059669; --grn-s: rgba(5,150,105,.10); --red: #dc2626; --red-s: rgba(220,38,38,.10); --ylw: #d97706; --ylw-s: rgba(217,119,6,.10); --blu: #2563eb; --blu-s: rgba(37,99,235,.10); --sh-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); --sh-md: 0 4px 16px rgba(15,23,42,.06), 0 1px 4px rgba(15,23,42,.04); --sh-lg: 0 12px 36px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.05); --sh-xl: 0 24px 60px rgba(15,23,42,.16); --sh-glow: 0 0 32px rgba(37,99,235,.10); background: var(--bg-0); color: var(--txt); } /* Spots that still hardcode dark surfaces — explicit overrides */ .locale-ko body { background: var(--bg-0); color: var(--txt); } .locale-ko #v-workspace { background: var(--bg-0); } .locale-ko .topbar { background: var(--bg-1); border-bottom: 1px solid var(--bdr); } .locale-ko .sidebar { background: var(--bg-1); border-right: 1px solid var(--bdr); } .locale-ko .sb-tabs { background: var(--bg-1); border-bottom: 1px solid var(--bdr); } .locale-ko .sb-tab { color: var(--txt3); } .locale-ko .sb-tab.active { color: var(--accent); } .locale-ko .chat-msgs { background: var(--bg-0); } .locale-ko .chat-input-wrap { background: var(--bg-1); border-top: 1px solid var(--bdr); } .locale-ko .chat-ta { background: transparent; color: var(--txt); } .locale-ko .chat-ta::placeholder { color: var(--txt4); } .locale-ko .b-user { background: var(--acc-s); color: var(--accent2); border-color: var(--acc-border); } .locale-ko .b-assistant { background: #fff; color: var(--txt); border: 1px solid #dde3ec; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .locale-ko .bubble-label { opacity: .55; } .locale-ko .undo-action { color: var(--txt3); } .locale-ko .undo-action:hover { color: var(--txt); background: rgba(15,23,42,.04); } .locale-ko .redo-bar { background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(37,99,235,.03)); border-color: rgba(37,99,235,.18); } .locale-ko .redo-bar-text { color: var(--txt2); } .locale-ko .redo-bar-btn { background: var(--accent); } .locale-ko .redo-bar-btn:hover { background: var(--accent2); } .locale-ko .tb-btn { color: var(--txt2); } .locale-ko .tb-btn:hover { color: var(--txt); background: var(--bg-3); border-color: var(--bdr2); } .locale-ko .tb-title { color: var(--txt2); } .locale-ko .tb-sep { background: var(--bdr); } .locale-ko #ws-status, .locale-ko .status-pill { background: var(--bg-3); border-color: var(--bdr); color: var(--txt2); } .locale-ko .preview-toolbar, .locale-ko .preview-tabs { background: var(--bg-1); border-bottom: 1px solid var(--bdr); } .locale-ko .preview-wrap { background: var(--bg-0); } .locale-ko .preview-overlay { background: rgba(255,255,255,.96); color: var(--txt); } .locale-ko .activity-log, .locale-ko .log-pre { background: var(--bg-2); color: var(--txt); border-color: var(--bdr); } .locale-ko .log-line { color: var(--txt2); } .locale-ko .gen-step { color: var(--txt3); } .locale-ko .gen-step.active { color: var(--accent); } .locale-ko .code-ta { background: var(--bg-2); color: var(--txt); border-color: var(--bdr); } .locale-ko .file-tree, .locale-ko .file-tabs { background: var(--bg-1); border-color: var(--bdr); } .locale-ko .file-tab { color: var(--txt3); } .locale-ko .file-tab.active { color: var(--txt); background: var(--bg-0); } .locale-ko .modal { background: var(--bg-1); border-color: var(--bdr); color: var(--txt); } .locale-ko .modal-btn { background: var(--bg-3); color: var(--txt); border-color: var(--bdr); } .locale-ko .toast { background: var(--bg-1); color: var(--txt); border: 1px solid var(--bdr); box-shadow: var(--sh-md); } /* Korean locale: denser, practical Korean SaaS/work-tool landing */ .locale-ko .land-view{background:#f6f7fb;color:#111827;overflow:auto} .locale-ko .land-bg{background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,247,251,.94)), radial-gradient(circle at 18% 18%,rgba(37,99,235,.08),transparent 34%), radial-gradient(circle at 84% 78%,rgba(16,185,129,.08),transparent 30%)} .locale-ko .aurora,.locale-ko .noise{display:none} .locale-ko .land-nav{padding:18px 40px;border-bottom:1px solid #e5e7eb;background:rgba(255,255,255,.88);backdrop-filter:blur(14px)} .locale-ko .brand-word{color:#111827;font-weight:800;letter-spacing:-.02em} /* Unified VibeCode logo coloring across all KO views (sidebar/dashboard/admin/workspace) — softer indigo */ .locale-ko .brand-mark svg path:nth-of-type(1){fill:#6366f1;stroke:#4f46e5;stroke-width:1} .locale-ko .brand-mark svg path:nth-of-type(2){fill:#c7d2fe;stroke:none} .locale-ko .brand-mark svg path:nth-of-type(3){fill:#4f46e5;stroke:rgba(79,70,229,.3);stroke-width:.3} .locale-ko .brand-mark svg path:nth-of-type(4){fill:#818cf8;stroke:rgba(79,70,229,.3);stroke-width:.3} .locale-ko .brand-mark svg circle{fill:#fff} .locale-ko .brand-mark svg ellipse{fill:rgba(255,255,255,.3)} .locale-ko .nav-pill{background:#fff;border-color:#d9dde6;color:#374151;border-radius:8px;box-shadow:0 1px 2px rgba(15,23,42,.04)} .locale-ko .nav-pill:hover{background:#f9fafb;color:#111827;border-color:#b8c0ce} .locale-ko .land-hero{ width:min(1220px,calc(100% - 64px)); margin:0 auto; display:grid; grid-template-columns:minmax(310px,410px) minmax(560px,740px); grid-template-areas: "title prompt" "copy prompt" "flow prompt" "templates prompt"; align-content:center; align-items:start; justify-content:center; column-gap:64px; row-gap:20px; padding:34px 0; position:relative; } .locale-ko .land-hero::before{ content:""; position:absolute; left:348px; top:232px; width:220px; height:118px; border-top:2px solid rgba(37,99,235,.16); border-right:2px solid rgba(37,99,235,.16); border-radius:0 42px 0 0; pointer-events:none; } .locale-ko .hero-h1{ grid-area:title; text-align:left; align-self:end; color:#111827; font-size:clamp(38px,4.4vw,58px); line-height:1.12; letter-spacing:-.045em; font-weight:850; } .locale-ko .hero-glow{ background:none; -webkit-text-fill-color:#2563eb; color:#2563eb; animation:none; } .locale-ko .hero-p{ grid-area:copy; text-align:left; max-width:360px; color:#475569; font-size:16px; line-height:1.75; } .ko-studio-panel{display:none} .locale-ko .ko-studio-panel{ grid-area:flow; display:flex; align-items:center; justify-content:center; max-width:410px; min-height:178px; padding:26px 24px; border:1px solid #d8dee9; border-radius:26px; background: radial-gradient(circle at 22% 20%,rgba(37,99,235,.15),transparent 28%), radial-gradient(circle at 88% 16%,rgba(34,197,94,.10),transparent 18%), linear-gradient(135deg,#fff,#f8fafc 68%,#eef6ff); box-shadow:0 22px 60px rgba(15,23,42,.10); overflow:hidden; position:relative; } .locale-ko .ko-studio-panel::before{ content:""; position:absolute; inset:18px; border:1px dashed rgba(148,163,184,.42); border-radius:20px; pointer-events:none; } .ko-guide-card{display:flex;align-items:center;gap:18px;position:relative;z-index:1} .ko-mascot{position:relative;width:118px;height:118px;flex:0 0 auto;filter:drop-shadow(0 18px 24px rgba(15,23,42,.18))} .ko-mascot::before{content:"";position:absolute;inset:16px 8px 5px;border-radius:34px 34px 28px 28px;background:#111827} .ko-mascot::after{content:"";position:absolute;left:36px;right:36px;top:2px;height:24px;border-radius:999px;background:#2563eb;box-shadow:0 10px 18px rgba(37,99,235,.22)} .ko-mascot-face{position:absolute;left:23px;right:23px;top:40px;height:42px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;gap:13px;z-index:1} .ko-mascot-eye{width:10px;height:10px;border-radius:50%;background:#2563eb;animation:mascotBlink 3.2s infinite} @keyframes mascotBlink{0%,88%,100%{transform:scaleY(1)}92%{transform:scaleY(.15)}} @keyframes koMascotBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} } .ko-mascot-spark{position:absolute;border-radius:6px;background:#60a5fa;z-index:2} .spark-a{width:18px;height:18px;right:0;top:30px;transform:rotate(14deg)} .spark-b{width:11px;height:11px;left:4px;bottom:20px;transform:rotate(-16deg);background:#22c55e} .ko-speech{position:relative;flex:1;padding:16px 16px 15px;border:1px solid #d8dee9;border-radius:18px 18px 18px 5px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.08)} .ko-speech::before{content:"";position:absolute;left:-7px;bottom:20px;width:13px;height:13px;background:#fff;border-left:1px solid #d8dee9;border-bottom:1px solid #d8dee9;transform:rotate(45deg)} .ko-speech strong{display:block;color:#111827;font-size:16px;letter-spacing:-.03em} .ko-speech span{display:block;margin-top:6px;color:#64748b;font-size:12.5px;line-height:1.5} .locale-ko .prompt-card{ grid-area:prompt; max-width:none; min-height:332px; background:#fff; border:1px solid #d8dee9; border-radius:18px; box-shadow:0 24px 68px rgba(15,23,42,.13); backdrop-filter:none; position:relative; overflow:visible; } .locale-ko .prompt-card::before{ content:"GUIDED PROMPT"; position:absolute; left:24px; top:-14px; padding:6px 10px; border:1px solid #d8dee9; border-radius:999px; background:#fff; color:#2563eb; font-size:11px; font-weight:900; letter-spacing:.08em; } .locale-ko .prompt-card::after{ content:""; position:absolute; left:-42px; top:128px; width:42px; height:2px; background:linear-gradient(90deg,rgba(37,99,235,.24),rgba(37,99,235,.08)); } .locale-ko .prompt-card:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12),0 18px 48px rgba(15,23,42,.12)} .locale-ko .land-view .prompt-ta{ min-height:184px; color:#111827; font-size:16px; line-height:1.7; padding:26px 28px 12px; } .locale-ko .land-view .prompt-ta::placeholder{color:#8b95a6} /* Inline chip area inside .prompt-left (next to the attach button). */ .locale-ko .land-view .land-upload-preview{background:transparent;padding:0;min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin} .locale-ko .land-view .land-upload-preview .upload-files{flex-wrap:nowrap} .locale-ko .prompt-actions{padding:14px 18px 18px 22px;border-top:1px solid #edf0f5;background:#fbfcfe} .ko-prompt-meta{display:none} .locale-ko .ko-prompt-meta{ display:flex; flex-wrap:wrap; gap:8px; padding:0 22px 18px; background:#fbfcfe; } .locale-ko .ko-prompt-meta span{ display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid #d8dee9; border-radius:999px; background:#fff; color:#475569; font-size:12px; font-weight:650; } .locale-ko .ko-prompt-meta span:first-child{background:#111827;border-color:#111827;color:#fff} .locale-ko .ko-prompt-meta span::before{ content:""; width:6px; height:6px; border-radius:50%; background:#2563eb; } .locale-ko .ko-prompt-meta span:first-child::before{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.16)} .locale-ko .prompt-icon-btn{background:#fff;border-color:#d8dee9;color:#64748b;border-radius:8px} .locale-ko .prompt-icon-btn:hover{background:#eff6ff;border-color:#93c5fd;color:#2563eb} .locale-ko .prompt-shortcut{color:#94a3b8} .locale-ko .prompt-shortcut kbd{background:#eef2f7;border-color:#d8dee9;color:#64748b} .locale-ko .prompt-go{background:#111827;border-radius:8px;box-shadow:none;padding:12px 24px;color:#fff} .locale-ko .prompt-go:hover{background:#2563eb;box-shadow:0 10px 24px rgba(37,99,235,.18);transform:translateY(-1px)} .locale-ko .tpl-section{grid-area:templates;max-width:390px;margin:4px 0 0;overflow:visible} .locale-ko .tpl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;justify-content:stretch} .locale-ko .tpl-pill{ width:100%; border-radius:8px; padding:10px 12px; background:#fff; border-color:#d8dee9; color:#334155; text-align:left; font-size:13px; font-weight:650; box-shadow:0 1px 2px rgba(15,23,42,.04); } .locale-ko .tpl-pill:hover{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8;box-shadow:none} .locale-ko .tpl-pill.active{background:#dbeafe;border-color:#2563eb;color:#1d4ed8;box-shadow:0 0 0 2px rgba(37,99,235,.10)} .locale-ko .land-foot{border-top:1px solid #e5e7eb;color:#64748b;background:transparent;margin:0} .locale-ko .lang-switcher select{background:#fff;border-color:#d8dee9;color:#334155;box-shadow:0 1px 2px rgba(15,23,42,.06)} .locale-ko .lang-switcher::after{border-color:#64748b} .locale-ko .land-view .upload-chip{background:#f8fafc;border-color:#d8dee9;color:#334155} .ko-side-menu,.ko-side-user,.ko-recent-section,.ko-top-actions{display:none} /* Korean locale: app-home dashboard layout. Flex column so the hero absorbs any leftover vertical space and the footer naturally lands at the viewport bottom without a mid-page gap. */ .locale-ko .land-view{ display:flex; flex-direction:column; height:auto; min-height:100vh; background:#f7f9fc; color:#0f172a; overflow:visible; } .locale-ko .land-hero{ flex:1 0 auto; } .locale-ko .land-foot{ border-top-color:#eef0f4; } .locale-ko .land-bg{ left:280px; background: radial-gradient(circle at 72% 16%,rgba(37,99,235,.08),transparent 30%), linear-gradient(180deg,#fff 0%,#fbfcff 58%,#f7f9fc 100%); } .locale-ko .land-nav{ position:fixed; inset:0 auto 0 0; width:280px; height:100vh; padding:32px 26px; border-right:1px solid #e5e9f1; border-bottom:none; background:rgba(255,255,255,.94); backdrop-filter:blur(18px); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; z-index:12; } .locale-ko .land-nav .brand{ justify-content:flex-start; gap:4px; margin-bottom:48px; } .locale-ko .land-nav .brand-mark{width:42px;height:42px} .locale-ko .land-nav .brand-mark svg{width:34px;height:34px} .locale-ko .brand-word{display:inline;color:#0f172a;font-size:22px;font-weight:850} .locale-ko .ko-side-menu{ display:flex; flex-direction:column; gap:4px; } .locale-ko .ko-new-project{ height:54px; margin-bottom:24px; border:none; border-radius:10px; background:#2563eb; color:#fff; font:800 15px/1 var(--font); box-shadow:0 14px 26px rgba(37,99,235,.25); } .locale-ko .ko-new-project::before{content:"+";font-size:22px;font-weight:400;margin-right:10px;vertical-align:-1px} .locale-ko .ko-side-section-label{ margin:18px 0 6px; padding:0 16px; color:#94a3b8; font-size:12px; font-weight:800; letter-spacing:-.005em; pointer-events:none; } .locale-ko .ko-side-divider{ margin:18px 16px 6px; height:1px; background:#e5e9f1; } .locale-ko .ko-side-item{ display:flex; align-items:center; gap:14px; height:46px; padding:0 16px; border-radius:9px; color:#64748b; font-size:15.5px; font-weight:800; } .locale-ko .ko-side-item svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; opacity:.82; } .locale-ko .ko-side-item.active{ color:#2563eb; background:linear-gradient(90deg,#eff6ff,#f8fbff); } .locale-ko .ko-side-item.active svg{opacity:1} .locale-ko .ko-side-user{ margin-top:auto; display:flex; align-items:center; gap:12px; color:#0f172a; } .locale-ko .ko-user-avatar{ position:relative; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:#e2e8f0; color:#475569; font-weight:900; overflow:hidden; flex-shrink:0; } .locale-ko .ko-user-avatar-img{ width:100%; height:100%; object-fit:cover; display:block; } .locale-ko .ko-user-avatar-img.hidden{display:none} .locale-ko .ko-user-avatar-fb{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; } .locale-ko .ko-user-avatar-fb.hidden{display:none} .locale-ko .ko-side-user strong{display:block;font-size:14px} .locale-ko .ko-side-user em{display:block;margin-top:3px;color:#64748b;font-size:12px;font-style:normal} .locale-ko .nav-right{ display:none; } .locale-ko .nav-pill{height:42px;padding:0 18px;border-radius:10px;white-space:nowrap} .locale-ko .ko-top-actions{ position:absolute; top:28px; left:auto; right:34px; width:326px; z-index:40; display:flex; align-items:center; justify-content:flex-end; gap:18px; } .locale-ko .ko-top-actions button{ font-family:var(--font); border:1px solid #d9e0ea; background:#fff; color:#334155; box-shadow:0 1px 2px rgba(15,23,42,.04); } .locale-ko .ko-upgrade{ height:42px; padding:0 18px; border-radius:10px; font-size:14px; font-weight:800; display:flex; align-items:center; gap:8px; } .locale-ko .ko-upgrade svg{ width:15px; height:15px; fill:none; stroke:#2563eb; stroke-width:2.2; stroke-linejoin:round; } .locale-ko .ko-round-btn{ width:38px; height:38px; border:none!important; background:transparent!important; color:#64748b!important; box-shadow:none!important; display:flex; align-items:center; justify-content:center; } .locale-ko .ko-round-btn svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .locale-ko .ko-avatar{ position:relative; width:42px; height:42px; border-radius:50%; border:none!important; background:#eef2f7!important; color:#475569!important; font-size:15px; font-weight:900; padding:0; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .locale-ko .ko-avatar-img{ width:100%; height:100%; object-fit:cover; display:block; } .locale-ko .ko-avatar-img.hidden{display:none} .locale-ko .ko-avatar-fb{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#475569; } .locale-ko .ko-avatar-fb.hidden{display:none} .locale-ko .land-hero{ width:auto; max-width:1180px; min-height:0; /* Center the hero in the area to the right of the 280px fixed sidebar. - Narrow screens: collapses to a 280px left anchor (the original look). - Wide screens: padding on both sides so the content stops being left-pinned with a huge empty right gutter. Derivation: sidebar(280) + leftGap + hero(1180) + rightGap = 100vw with leftGap == rightGap → both = (100vw - 280 - 1180)/2, i.e. margin-left = 280 + (100vw - 1460) / 2 = (100vw - 900) / 2. */ margin-left:max(280px, calc((100vw - 900px) / 2)); margin-right:max(56px, calc((100vw - 1460px) / 2)); padding:120px 16px 48px 72px; display:block; position:relative; } .locale-ko .land-hero::before{display:none} .locale-ko .hero-h1{ max-width:820px; margin:0 0 14px; color:#0f172a; font-size:clamp(30px,2.7vw,40px); line-height:1.22; letter-spacing:-.045em; text-align:left; } .locale-ko .hero-glow{ -webkit-text-fill-color:currentColor; color:#0f172a; } .locale-ko .hero-p{ max-width:none; margin:0 0 34px; color:#64748b; font-size:18px; line-height:1.6; text-align:left; } .locale-ko .prompt-card{ width:100%; max-width:none; min-height:256px; margin:0 0 38px; padding-top:68px; border-radius:14px; border-color:#dfe5ee; background:#fff; box-shadow:0 18px 46px rgba(15,23,42,.08); position:relative; overflow:visible; } .locale-ko .prompt-card::before{ content:"만들고 싶은 앱을 설명해주세요"; left:32px; top:30px; padding:0; border:none; border-radius:0; background:transparent; color:#0f172a; font-size:17px; font-weight:900; letter-spacing:-.02em; } .locale-ko .prompt-card::after{display:none} .locale-ko .land-view .prompt-ta{ min-height:86px; margin:0 32px; width:calc(100% - 64px); padding:18px 18px; border:1px solid #d9e0ea; border-radius:10px; color:#0f172a; font-size:15px; line-height:1.6; } .locale-ko .land-view .prompt-ta:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.10)} .locale-ko .prompt-actions{ padding:24px 32px 28px; border-top:none; background:transparent; } .locale-ko .prompt-go{ min-width:136px; height:48px; border-radius:10px; background:#2563eb; justify-content:center; font-size:14px; box-shadow:0 14px 26px rgba(37,99,235,.22); } .locale-ko .prompt-go:hover{background:#1d4ed8} .locale-ko .prompt-icon-btn{ width:auto; min-width:116px; height:42px; padding:0 16px; border-radius:10px; } .locale-ko .prompt-icon-btn{font-family:var(--font);white-space:nowrap} .locale-ko .prompt-icon-btn::after{content:"파일 첨부";margin-left:9px;font-size:13px;font-weight:800} .locale-ko .prompt-shortcut{display:none} .locale-ko .ko-prompt-meta{display:none} .locale-ko .ko-studio-panel{ position:absolute; top:90px; right:56px; width:280px; min-height:280px; padding:0; border:none; border-radius:0; background:transparent; box-shadow:none; overflow:visible; z-index:3; } .locale-ko .ko-studio-panel::before{display:none} .locale-ko .ko-guide-card{gap:0} .locale-ko .ko-mascot{ width:280px; height:280px; margin-left:auto; filter:drop-shadow(0 18px 24px rgba(15,23,42,.18)); } .locale-ko .ko-mascot::before, .locale-ko .ko-mascot::after{display:none} .locale-ko .ko-mascot-img{ width:100%; height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; } .locale-ko .ko-speech{display:none} .locale-ko .ko-speech strong{font-size:15px} .locale-ko .ko-speech span{font-size:12px} .locale-ko .tpl-section{ width:100%; max-width:none; margin:0 0 28px; position:relative; } .locale-ko .tpl-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px;padding:0} .locale-ko .tpl-section-title{color:#0f172a;font-size:18px;font-weight:900;letter-spacing:-.01em} .locale-ko .tpl-section-sub{color:#64748b;font-size:13px;margin:0 0 16px;padding:0} .locale-ko .tpl-section-all{color:#2563eb;font-size:13px;font-weight:700;background:transparent;border:none;cursor:pointer;padding:4px 0;font-family:inherit} .locale-ko .tpl-section-all:hover{color:#1d4ed8;text-decoration:underline} .locale-ko .tpl-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .locale-ko .tpl-pill{ min-height:200px; padding:22px 18px 16px; border-radius:14px; border:1px solid #dfe5ee; background:#fff; color:#0f172a; font-size:14px; font-weight:900; text-align:left; box-shadow:none; display:flex; flex-direction:column; align-items:stretch; gap:0; min-width:0; position:relative; overflow:hidden; cursor:pointer; transition:transform .2s,border-color .2s,box-shadow .2s; } .locale-ko .tpl-pill .tpl-pill-ic{ width:72px;height:72px;margin:0 0 16px;object-fit:contain;user-select:none;-webkit-user-drag:none; } .locale-ko .tpl-pill strong{display:block;font-size:14px;font-weight:900;color:#0f172a;line-height:1.35;word-break:keep-all;overflow-wrap:break-word} .locale-ko .tpl-pill span{display:block;margin-top:8px;color:#64748b;font-size:12px;font-weight:600;line-height:1.45;white-space:normal;word-break:keep-all;overflow-wrap:break-word} .locale-ko .tpl-pill:hover{ transform:translateY(-2px); background:#fff; border-color:#bfdbfe; box-shadow:0 14px 28px rgba(15,23,42,.08); } .locale-ko .tpl-pill.loading{opacity:.6;pointer-events:none} .locale-ko .tpl-pill.loading::after{content:"불러오는 중…";position:absolute;left:0;right:0;bottom:0;padding:6px 0;background:rgba(37,99,235,.95);color:#fff;font-size:11px;font-weight:700;text-align:center} .locale-ko .ko-recent-section{ display:block; margin-top:28px; margin-bottom:36px; } .locale-ko .ko-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .locale-ko .ko-section-head strong{font-size:18px;color:#0f172a} .locale-ko .ko-section-head span{font-size:13px;color:#64748b} .locale-ko .ko-recent-list{ background:transparent; border-top:1px solid #e5e9f1; } /* Recent list — rows are now rendered dynamically with .ko-recent-row */ .locale-ko .ko-side-menu .ko-side-item{cursor:pointer;border:none;background:transparent;width:100%;text-align:left;font-family:var(--font);transition:background .15s ease,color .15s ease} .locale-ko .ko-side-menu .ko-side-item:hover{background:#f1f5f9;color:#1e293b} .locale-ko .ko-side-menu .ko-new-project{cursor:pointer} .locale-ko .ko-side-menu .ko-new-project:hover{background:#1d4ed8} .locale-ko .ko-side-user{cursor:pointer;border:none;width:100%;text-align:left;padding:8px;border-radius:10px;background:transparent;transition:background .15s ease} .locale-ko .ko-side-user:hover{background:#f1f5f9} .locale-ko .ko-top-actions button{cursor:pointer} .locale-ko .ko-top-actions button:hover{background:#f8fafc!important} .locale-ko .ko-round-btn{position:relative;border-radius:50%;cursor:pointer} .locale-ko .ko-round-btn:hover{background:#eef2f7!important;color:#0f172a!important} .locale-ko .ko-bell-badge{position:absolute;top:6px;right:6px;min-width:7px;height:7px;border-radius:999px;background:#ef4444;box-shadow:0 0 0 2px #fff} .locale-ko .ko-avatar{cursor:pointer} .locale-ko .ko-upgrade:hover{border-color:#2563eb;color:#1e3a8a} .locale-ko .ko-recent-all{cursor:pointer;border:none;background:transparent;color:#2563eb;font:700 13px/1 var(--font);padding:6px 10px;border-radius:8px;transition:background .15s ease} .locale-ko .ko-recent-all:hover{background:#eff6ff} .locale-ko .ko-recent-list .ko-recent-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto 28px;align-items:center;gap:14px;min-height:64px;padding:0 24px;border-bottom:1px solid #eef2f7;cursor:pointer;transition:background .12s ease} .locale-ko .ko-recent-list .ko-recent-row:last-child{border-bottom:none} .locale-ko .ko-recent-list .ko-recent-row:hover{background:#f8fafc} .locale-ko .ko-recent-list .ko-recent-row i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#2563eb,#60a5fa)} .locale-ko .ko-recent-list .ko-recent-row i::before{content:"";width:16px;height:16px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3 20 7.5v9L12 21l-8-4.5v-9L12 3Z'/%3E%3Cpath d='M4 7.5 12 12l8-4.5M12 12v9'/%3E%3C/svg%3E")} .locale-ko .ko-recent-list .ko-recent-row[data-tone="1"] i{background:linear-gradient(135deg,#22c55e,#86efac)} .locale-ko .ko-recent-list .ko-recent-row[data-tone="2"] i{background:linear-gradient(135deg,#8b5cf6,#c4b5fd)} .locale-ko .ko-recent-list .ko-recent-row[data-tone="3"] i{background:linear-gradient(135deg,#f59e0b,#fcd34d)} .locale-ko .ko-recent-list .ko-recent-row b{font-size:14px;color:#0f172a;display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden} .locale-ko .ko-recent-list .ko-recent-row b strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700} .locale-ko .ko-recent-list .ko-recent-row em{color:#64748b;font-size:11px;font-style:normal;font-weight:600} .locale-ko .ko-recent-list .ko-recent-row span.ko-recent-chip{padding:4px 9px;border:1px solid #dfe5ee;border-radius:999px;color:#64748b;font-size:11px;background:#fff} .locale-ko .ko-recent-list .ko-recent-row .ko-recent-more{border:none;background:transparent;color:#64748b;font:800 14px/1 var(--font);width:28px;height:28px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center} .locale-ko .ko-recent-list .ko-recent-row .ko-recent-more:hover{background:#e2e8f0;color:#0f172a} .locale-ko .ko-recent-list .ko-recent-empty{padding:24px;color:#64748b;font-size:13px;text-align:center} .locale-ko .ko-recent-list .ko-recent-skel{padding:18px 24px;display:flex;flex-direction:column;gap:10px} .locale-ko .ko-recent-list .ko-recent-skel span{display:block;height:14px;background:linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);background-size:200% 100%;animation:koSkel 1.4s linear infinite;border-radius:6px} @keyframes koSkel{0%{background-position:200% 0}100%{background-position:-200% 0}} .ko-recent-menu{position:fixed;z-index:9500;min-width:160px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.12);padding:6px;display:flex;flex-direction:column;font-family:var(--font)} .ko-recent-menu button{appearance:none;border:none;background:transparent;text-align:left;padding:9px 12px;border-radius:8px;font-size:13px;color:#1e293b;cursor:pointer;font-family:var(--font)} .ko-recent-menu button:hover{background:#f1f5f9} .ko-recent-menu .ko-recent-menu-danger{color:#dc2626} .ko-recent-menu .ko-recent-menu-danger:hover{background:#fef2f2} .ko-notif-pop{position:fixed;z-index:9500;width:340px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 24px 60px rgba(15,23,42,.18);overflow:hidden;font-family:var(--font)} .ko-notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f1f5f9} .ko-notif-head strong{font-size:14px;color:#0f172a} .ko-notif-clear{border:none;background:transparent;color:#2563eb;font:700 12px/1 var(--font);cursor:pointer;padding:6px 8px;border-radius:6px} .ko-notif-clear:hover{background:#eff6ff} .ko-notif-list{max-height:360px;overflow-y:auto} .ko-notif-list .ko-notif-row{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;gap:12px;align-items:flex-start;cursor:pointer} .ko-notif-list .ko-notif-row:last-child{border-bottom:none} .ko-notif-list .ko-notif-row:hover{background:#f8fafc} .ko-notif-list .ko-notif-row.unread{background:#eff6ff} .ko-notif-list .ko-notif-row.unread:hover{background:#dbeafe} .ko-notif-list .ko-notif-row .ko-notif-dot{width:8px;height:8px;border-radius:50%;background:#2563eb;margin-top:6px;flex:0 0 auto;visibility:hidden} .ko-notif-list .ko-notif-row.unread .ko-notif-dot{visibility:visible} .ko-notif-list .ko-notif-row .ko-notif-body{min-width:0} .ko-notif-list .ko-notif-row .ko-notif-body strong{display:block;font-size:13px;color:#0f172a;margin-bottom:3px} .ko-notif-list .ko-notif-row .ko-notif-body span{display:block;font-size:12px;color:#64748b;line-height:1.45} .ko-notif-list .ko-notif-row .ko-notif-body em{display:block;font-size:11px;color:#94a3b8;margin-top:4px;font-style:normal} .ko-notif-list .ko-notif-row .ko-notif-chev{width:14px;height:14px;flex:0 0 auto;margin-top:7px;fill:none;stroke:#94a3b8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s ease,stroke .12s ease} .ko-notif-list .ko-notif-row.linkable:hover .ko-notif-chev{transform:translateX(2px);stroke:#2563eb} .ko-notif-empty{padding:32px 16px;text-align:center;color:#94a3b8;font-size:13px} .ko-pane{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:8500;padding:24px;font-family:var(--font)} .ko-pane-inner{position:relative;background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:calc(100vh - 48px);overflow-y:auto;box-shadow:0 30px 80px rgba(15,23,42,.25)} .ko-pane-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:none;background:#f1f5f9;color:#475569;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1} .ko-pane-close:hover{background:#e2e8f0;color:#0f172a} .ko-pane-body{padding:32px 32px 28px} .ko-pane-body h2{font-size:20px;color:#0f172a;margin:0 0 6px;font-weight:800} .ko-pane-body p.ko-pane-sub{font-size:13px;color:#64748b;margin:0 0 22px} .ko-pane-body section{padding:16px 0;border-top:1px solid #f1f5f9} .ko-pane-body section:first-of-type{border-top:none;padding-top:0} .ko-pane-body section h3{font-size:14px;color:#0f172a;margin:0 0 10px;font-weight:700} .ko-pane-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0} .ko-pane-row label{font-size:13px;color:#1e293b;flex:1;min-width:0} .ko-pane-row label em{display:block;font-style:normal;font-size:11px;color:#94a3b8;margin-top:3px} .ko-pane-row select,.ko-pane-row input[type="text"]{font:500 13px/1 var(--font);padding:7px 10px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#0f172a;min-width:140px} .ko-pane-switch{position:relative;width:36px;height:20px;background:#cbd5e1;border-radius:999px;cursor:pointer;border:none;flex:0 0 auto;transition:background .2s ease} .ko-pane-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s ease;box-shadow:0 1px 3px rgba(15,23,42,.2)} .ko-pane-switch.on{background:#2563eb} .ko-pane-switch.on::after{left:18px} .ko-snip-grid{display:flex;flex-direction:column;gap:10px} .ko-snip-card{width:100%;text-align:left;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;background:#fff;cursor:pointer;transition:all .15s ease;font-family:var(--font)} .ko-snip-card:hover{border-color:#2563eb;background:#f8fafc;transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,23,42,.06)} .ko-snip-card strong{display:block;color:#0f172a;font-size:14px;margin-bottom:4px;font-weight:700} .ko-snip-card span{display:block;color:#64748b;font-size:12px;line-height:1.5} .ko-upgrade-pane .ko-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px} .ko-upgrade-pane .ko-plan{border:1px solid #e2e8f0;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px} .ko-upgrade-pane .ko-plan.popular{border-color:#2563eb;background:linear-gradient(180deg,#eff6ff,#fff);box-shadow:0 6px 18px rgba(37,99,235,.08)} .ko-upgrade-pane .ko-plan b{font-size:15px;color:#0f172a;font-weight:800} .ko-upgrade-pane .ko-plan .price{font-size:22px;color:#0f172a;font-weight:800} .ko-upgrade-pane .ko-plan .price small{font-size:12px;color:#64748b;font-weight:500;margin-left:4px} .ko-upgrade-pane .ko-plan ul{list-style:none;padding:0;margin:6px 0 12px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:#475569} .ko-upgrade-pane .ko-plan ul li::before{content:"✓ ";color:#16a34a;font-weight:800;margin-right:4px} .ko-upgrade-pane .ko-plan button{margin-top:auto;border:none;background:#0f172a;color:#fff;padding:9px 0;border-radius:9px;font:700 13px/1 var(--font);cursor:pointer} .ko-upgrade-pane .ko-plan.popular button{background:#2563eb} .ko-upgrade-pane .ko-plan button:hover{opacity:.92} .ko-upgrade-pane .ko-plan button:disabled{background:#94a3b8;cursor:not-allowed;opacity:1} .ko-upgrade-pane .ko-plan.current{outline:2px solid #2563eb;outline-offset:-2px} .ko-upgrade-pane .ko-plan ul li em{font-style:normal;color:#16a34a;font-size:11px;font-weight:700;margin-left:4px} .ko-upgrade-pane h2 .pro-chip{display:inline-block;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;padding:3px 9px;border-radius:5px;vertical-align:3px;margin-right:6px} .ud-pro-chip{display:inline-block;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:4px;margin-right:6px;vertical-align:1px} .ko-usage{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;margin-bottom:18px} .ko-usage-h{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:8px;color:#475569} .ko-usage-h strong{font-weight:700;color:#0f172a} .ko-usage-h span{font-variant-numeric:tabular-nums;font-weight:600;color:#0f172a} .ko-usage-bar{width:100%;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden} .ko-usage-bar>div{height:100%;transition:width .3s} .ko-usage-foot{margin-top:7px;font-size:11.5px;color:#64748b} .locale-ko .land-foot{ margin-left:280px; border-top:1px solid #e5e9f1; background:transparent; position:relative; z-index:5; clear:both; /* Footer is full-width across the area to the right of the sidebar. This keeps it visually grounded — it stretches across the bottom instead of leaving a big trailing gap on wide monitors. */ } /* ═══════════════════════════════════════════ KO Dashboard (light theme) ═══════════════════════════════════════════ */ .locale-ko #v-dashboard{background:#f6f7fb;color:#0f172a} .locale-ko #v-dashboard .topbar{background:#fff;border-bottom:1px solid #e2e8f0;color:#0f172a;height:64px;padding:0 28px} .locale-ko #v-dashboard .tb-btn{background:#fff;border:1px solid #e2e8f0;color:#475569} .locale-ko #v-dashboard .tb-btn:hover{background:#f1f5f9;border-color:#cbd5e1;color:#0f172a} .locale-ko #v-dashboard .tb-sep{background:#e2e8f0} .locale-ko #v-dashboard .tb-title{color:#475569;font-size:14px;font-weight:600} .locale-ko .brand-sm{gap:6px} .locale-ko .brand-sm .brand-mark-sm{margin-right:0} .locale-ko .brand-sm span{color:#0f172a;font-weight:800;letter-spacing:-.02em} /* Per-view logo overrides removed — unified `.locale-ko .brand-mark svg` rule above handles all KO views */ .locale-ko #v-dashboard .btn-accent{background:#2563eb;color:#fff;font-size:14px;font-weight:700;padding:10px 18px;border-radius:10px;box-shadow:0 8px 20px rgba(37,99,235,.22)} .locale-ko #v-dashboard .btn-accent:hover{background:#1d4ed8;box-shadow:0 10px 26px rgba(37,99,235,.3);transform:translateY(-1px)} .locale-ko #v-dashboard .dash-body{padding:32px 36px} .locale-ko #v-dashboard .dash-grid{gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .locale-ko #v-dashboard .dash-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:22px;box-shadow:0 1px 2px rgba(15,23,42,.04);gap:14px} .locale-ko #v-dashboard .dash-card:hover{border-color:#cbd5e1;box-shadow:0 14px 32px rgba(15,23,42,.08);transform:translateY(-2px)} .locale-ko #v-dashboard .dc-title{color:#0f172a;font-size:15px;font-weight:700} .locale-ko #v-dashboard .dc-dot{box-shadow:0 0 0 3px rgba(15,23,42,.04)} .locale-ko #v-dashboard .dc-done{background:#16a34a} .locale-ko #v-dashboard .dc-error{background:#ef4444} .locale-ko #v-dashboard .dc-pending,.locale-ko #v-dashboard .dc-running{background:#f59e0b} .locale-ko #v-dashboard .dc-prompt{color:#64748b;font-size:13px;line-height:1.55} .locale-ko #v-dashboard .dc-meta{color:#94a3b8;font-size:12px;gap:10px} .locale-ko #v-dashboard .dc-meta-sep{color:#cbd5e1} .locale-ko #v-dashboard .dc-actions{gap:8px;margin-top:6px} .locale-ko #v-dashboard .dc-open{background:#0f172a;color:#fff;border:1px solid #0f172a;padding:8px 16px;font-weight:600;border-radius:9px} .locale-ko #v-dashboard .dc-open:hover{background:#1e293b;border-color:#1e293b} .locale-ko #v-dashboard .dc-del{background:#fff;color:#64748b;border:1px solid #e2e8f0;padding:8px 16px;font-weight:600;border-radius:9px} .locale-ko #v-dashboard .dc-del:hover{color:#dc2626;border-color:#fecaca;background:#fef2f2} .locale-ko #v-dashboard .dash-loading{gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .locale-ko #v-dashboard .skel-card{background:linear-gradient(110deg,#eef2f7 30%,#f8fafc 50%,#eef2f7 70%);background-size:200% 100%;border:1px solid #e2e8f0;border-radius:16px;height:180px} .locale-ko #v-dashboard .dash-empty{color:#64748b;padding:88px 0;gap:18px} .locale-ko #v-dashboard .empty-illustration{background:#fff;border:1px solid #e2e8f0;width:96px;height:96px;border-radius:22px;box-shadow:0 6px 18px rgba(15,23,42,.05)} .locale-ko #v-dashboard .empty-illustration svg{color:#2563eb;opacity:.7} .locale-ko #v-dashboard .dash-empty h3{color:#0f172a;font-size:20px;font-weight:800} .locale-ko #v-dashboard .dash-empty p{color:#64748b;font-size:14px;max-width:360px} .locale-ko #v-dashboard .dash-err{color:#64748b} .locale-ko #v-dashboard .btn-lg{padding:12px 22px;font-size:14px} /* ═══════════════════════════════════════════ TOPBAR (shared across dashboard + workspace) ═══════════════════════════════════════════ */ .topbar{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 var(--sp-3);background:var(--bg-1);border-bottom:1px solid var(--bdr);flex-shrink:0;position:relative;z-index:10} .tb-left,.tb-right{display:flex;align-items:center;gap:var(--sp-2)} .tb-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:transparent;border:1px solid var(--bdr);border-radius:var(--rs);color:var(--txt3);cursor:pointer;transition:all .2s var(--ease)} .tb-btn:hover{color:var(--txt);background:var(--bg-3);border-color:var(--bdr2)} .brand-sm{gap:0} .brand-mark-sm{width:22px;height:22px;border-radius:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;margin-right:2px} .tb-sep{width:1px;height:20px;background:var(--bdr);margin:0 var(--sp-1)} .tb-title{font-size:12.5px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px;letter-spacing:-.01em} .btn-accent{font-family:var(--font);font-size:12px;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:var(--rs);padding:7px 16px;cursor:pointer;transition:all .2s var(--ease);display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(139,92,246,.2)} .btn-accent:hover{background:#7c3aed;box-shadow:0 4px 16px rgba(139,92,246,.3);transform:translateY(-1px)} /* Status pill */ .status-pill{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;padding:4px 10px;border-radius:100px;border:1px solid var(--bdr);background:var(--bg-2);transition:all .25s var(--ease)} .st-dot{width:6px;height:6px;border-radius:50%;background:var(--txt4);transition:all .3s} .st-ready{color:var(--grn);border-color:rgba(52,211,153,.15)}.st-ready .st-dot{background:var(--grn)} .st-running{color:var(--accent2);border-color:var(--acc-border)}.st-running .st-dot{background:var(--accent2);animation:pulse 1.2s infinite} .st-done{color:var(--grn);border-color:rgba(52,211,153,.2)}.st-done .st-dot{background:var(--grn)} .st-error{color:var(--red);border-color:rgba(248,113,113,.2)}.st-error .st-dot{background:var(--red)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .cancel-pill{display:flex;align-items:center;gap:5px;font-family:var(--font);font-size:11px;font-weight:500;color:var(--red);background:var(--red-s);border:1px solid rgba(248,113,113,.15);border-radius:100px;padding:4px 12px 4px 8px;cursor:pointer;transition:all .2s var(--ease)} .cancel-pill:hover{background:rgba(248,113,113,.15);border-color:rgba(248,113,113,.3)} .tb-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px;overflow:hidden;background:var(--bdr)} .tb-progress-bar{width:30%;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:1px;animation:pslide 2s ease-in-out infinite} @keyframes pslide{0%{transform:translateX(-100%)}100%{transform:translateX(430%)}} /* ═══════════════════════════════════════════ DASHBOARD ═══════════════════════════════════════════ */ .dash-body{flex:1;overflow-y:auto;padding:var(--sp-6) var(--sp-8)} .dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-4)} .admin-metrics{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--sp-6);padding:0;background:transparent;border:none;border-radius:0;box-shadow:none} .admin-metrics-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);padding-bottom:8px;border-bottom:1px solid #1b2433} .admin-metrics-controls{display:flex;align-items:center;gap:8px} .admin-metrics-select{appearance:none;background:#0b1220;border:1px solid #253042;color:#d9e4fb;border-radius:6px;padding:8px 11px;font:600 12px/1 var(--font);box-shadow:none} .admin-metrics-head h2{font-size:22px;font-weight:700;letter-spacing:-.03em;color:#f8fbff;margin:0} .admin-metrics-head p{font-size:12px;color:#8d9bb1;margin:6px 0 0} .admin-head-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px} .admin-head-pill{padding:10px 12px;border-radius:6px;background:#0b1220;border:1px solid #1f2a3b} .admin-head-label{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7587a8;margin-bottom:6px} .admin-head-pill strong{display:block;font-size:13px;font-weight:600;color:#f8fbff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .admin-metrics-overview{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,.9fr);gap:12px} .admin-overview-hero,.admin-overview-side,.admin-metrics-chart-card,.admin-metrics-events,.admin-metrics-side-card,.admin-metric-card{position:relative;overflow:hidden} .admin-overview-hero::before,.admin-metrics-chart-card::before,.admin-metrics-events::before,.admin-metrics-side-card::before,.admin-metric-card::before{display:none} .admin-overview-hero{padding:18px;border:1px solid #243044;border-radius:8px;background:#0f1724;display:flex;flex-direction:column;gap:14px;justify-content:space-between;min-height:0} .admin-overview-topline{display:flex;align-items:center;justify-content:space-between;gap:12px} .admin-overview-kicker{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8091b2} .admin-overview-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:6px;background:#111b2b;border:1px solid #2a3a50;color:#d7e1f3;font:700 10px/1 var(--font);text-transform:uppercase;letter-spacing:.08em} .admin-overview-window{font-size:21px;font-weight:700;letter-spacing:-.03em;color:#f8fbff;line-height:1.1} .admin-overview-meta{font-size:12px;line-height:1.65;color:#99a8bf;max-width:60ch} .admin-overview-pulse{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:auto} .admin-overview-pulse-bar{padding:10px;border-radius:6px;background:#0b1220;border:1px solid #1f2a3b} .admin-overview-pulse-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7e90b2;margin-bottom:6px} .admin-overview-pulse-value{font-size:16px;font-weight:700;letter-spacing:-.02em;color:#f5f8ff} .admin-overview-pulse-meta{font-size:11px;color:#8ea0c3;margin-top:4px} .admin-overview-side{display:flex;flex-direction:column;gap:12px} .admin-overview-health{padding:12px;border:1px solid #243044;border-radius:8px;background:#0f1724;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .admin-health-chip{padding:12px;border-radius:6px;background:#0b1220;border:1px solid #1f2a3b} .admin-health-chip-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7f92bb;margin-bottom:9px} .admin-health-chip-value{font-size:17px;font-weight:700;letter-spacing:-.03em;color:#f5f8ff} .admin-health-chip-meta{font-size:11px;color:#93a4c4;margin-top:5px;line-height:1.45} .admin-overview-incidents{padding:12px;border:1px solid #243044;border-radius:8px;background:#0f1724;display:flex;flex-direction:column;gap:8px} .admin-overview-incidents-title{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8395b8} .admin-overview-incident{padding:12px;border-radius:6px;background:#0b1220;border:1px solid #1f2a3b} .admin-overview-incident strong{display:block;font-size:13px;font-weight:600;color:#f8fbff;margin-bottom:4px} .admin-overview-incident span{display:block;font-size:12px;line-height:1.55;color:#96a7c9} .admin-metrics-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .admin-metric-card{padding:13px 13px 12px;border:1px solid #243044;border-radius:6px;background:#0f1724;box-shadow:none} .admin-metric-label{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#7f92ba;margin-bottom:10px} .admin-metric-value{font-size:22px;font-weight:760;letter-spacing:-.05em;color:#f8fbff;line-height:1} .admin-metric-meta{font-size:12px;color:#97a8c8;margin-top:8px;line-height:1.5} .admin-metrics-charts{display:grid;grid-template-columns:1fr 1fr;gap:12px} .admin-metrics-chart-card{padding:14px;border:1px solid #243044;border-radius:8px;background:#0f1724} .admin-metrics-lower{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.74fr);gap:12px;align-items:start} .admin-metrics-events{display:flex;flex-direction:column;gap:12px;min-height:100%;padding:14px;border:1px solid #243044;border-radius:8px;background:#0f1724} .admin-metrics-events-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap} .admin-metrics-events-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .admin-metrics-search{min-width:220px;background:#0b1220;border:1px solid #253042;color:#d9e4fb;border-radius:6px;padding:9px 12px;font:600 12px/1 var(--font);outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)} .admin-metrics-search:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.12)} .admin-metrics-search::placeholder{color:#6f82a8} .admin-metrics-subtitle{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8ea0c6} .admin-events-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .admin-events-summary-card{padding:10px 12px;border-radius:6px;background:#0b1220;border:1px solid #1f2a3b} .admin-events-summary-card strong{display:block;font-size:17px;font-weight:700;color:#f8fbff;letter-spacing:-.03em} .admin-events-summary-card span{display:block;font-size:11px;color:#93a4c4;margin-top:4px} .admin-chart-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .admin-chart-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:#8fa2c6} .admin-chart-legend-dot{width:10px;height:10px;border-radius:999px;flex-shrink:0} .admin-chart{display:grid;grid-template-columns:repeat(auto-fit,minmax(36px,1fr));gap:8px;align-items:end;min-height:180px;margin-top:12px;padding-top:8px;border-top:1px solid #1d2736} .admin-chart-empty{font-size:12px;color:#8fa2c6} .admin-chart-col{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0} .admin-chart-bars{display:flex;align-items:flex-end;gap:4px;height:124px;width:100%;justify-content:center} .admin-chart-bar{position:relative;width:11px;min-height:4px;border-radius:2px 2px 0 0;background:rgba(129,140,248,.35);cursor:default} .admin-chart-bar-run{background:linear-gradient(180deg,#60a5fa,#3730a3)} .admin-chart-bar-success{background:linear-gradient(180deg,#34d399,#065f46)} .admin-chart-bar-quota{background:linear-gradient(180deg,#f87171,#7f1d1d)} .admin-chart-bar-prune{background:linear-gradient(180deg,#fbbf24,#78350f)} .admin-chart-bar-container{background:linear-gradient(180deg,#f472b6,#831843)} .admin-chart-bar::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);padding:7px 9px;border-radius:10px;background:rgba(2,6,23,.96);border:1px solid rgba(148,163,184,.18);color:#e5eefc;font-size:11px;line-height:1.35;white-space:pre;pointer-events:none;opacity:0;transition:opacity .16s ease,transform .16s ease;box-shadow:0 12px 30px rgba(2,6,23,.4);z-index:10} .admin-chart-bar:hover::after{opacity:1;transform:translateX(-50%) translateY(0)} .admin-chart-label{font-size:10px;color:#8091b4;white-space:nowrap} .admin-metrics-list{display:flex;flex-direction:column;gap:0;border:1px solid #243044;border-radius:6px;overflow:hidden;background:#0b1220} .admin-metrics-empty{display:flex;align-items:center;justify-content:center;min-height:220px;padding:24px;border:1px dashed #243044;border-radius:6px;background:#0b1220;font-size:13px;line-height:1.7;color:#9aa9c5;text-align:center} .admin-metrics-pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:2px} .admin-metrics-page-text{font-size:12px;color:#95a6c7;min-width:90px;text-align:center} .admin-metrics-side{display:flex;flex-direction:column;gap:12px} .admin-metrics-side-card{padding:14px;border:1px solid #243044;border-radius:8px;background:#0f1724} .admin-insights-list,.admin-quick-stats,.admin-focus-list{display:flex;flex-direction:column;gap:10px;margin-top:14px} .admin-insight-item,.admin-quick-stat,.admin-focus-item{padding:12px;border-radius:6px;background:#0b1220;border:1px solid #1f2a3b} .admin-insight-item strong,.admin-quick-stat strong,.admin-focus-item strong{display:block;font-size:13px;font-weight:600;color:#f5f8ff;margin-bottom:4px} .admin-insight-item span,.admin-quick-stat span,.admin-focus-item span{display:block;font-size:12px;line-height:1.55;color:#95a5c3} .admin-metric-event{display:grid;grid-template-columns:190px minmax(0,1fr) 190px;gap:14px;align-items:center;padding:12px 14px;border-bottom:1px solid #172030;background:transparent} .admin-metric-event:last-child{border-bottom:none} .admin-metric-event-top{display:contents} .admin-metric-event-main{display:flex;align-items:center;gap:10px;min-width:0} .admin-metric-event-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end} .admin-metric-event-name{display:inline-flex;align-items:center;justify-content:flex-start;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#dbe7ff;padding:5px 7px;border-radius:4px;background:#111b2b;border:1px solid #28364a} .admin-metric-event-session{display:inline-flex;align-items:center;gap:4px;padding:6px 8px;background:#0f1724;border:1px solid #253246;border-radius:4px;color:#c7d2fe;font:700 10px/1 var(--mono);cursor:pointer;transition:all .15s var(--ease)} .admin-metric-event-session:hover{background:#162033;border-color:#30445f;color:#eef2ff} .admin-metric-event-inspect{display:inline-flex;align-items:center;padding:6px 10px;background:#0b1220;border:1px solid #253042;border-radius:4px;color:#d1ddf7;font:700 10px/1 var(--font);cursor:pointer;transition:all .15s var(--ease)} .admin-metric-event-inspect:hover{background:#121b2c;border-color:#30445f;color:#fff} .admin-metric-event-time{font-size:12px;color:#98a9c9;text-align:right} .admin-metric-event-detail{font-size:12px;color:#b7c4da;line-height:1.55;word-break:break-word} .dash-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);padding:100px 0;color:var(--txt4)} .empty-illustration{width:88px;height:88px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);border:1px solid var(--bdr);border-radius:20px;margin-bottom:var(--sp-2)} .empty-illustration svg{color:var(--txt4);opacity:.4} .dash-empty h3{font-size:17px;font-weight:600;color:var(--txt2);letter-spacing:-.02em} .dash-empty p{font-size:14px;color:var(--txt4);max-width:320px;text-align:center;line-height:1.6} .btn-lg{padding:10px 24px;font-size:14px;gap:7px;margin-top:var(--sp-2)} .dash-loading{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-4)} .skel-card{height:170px;background:linear-gradient(110deg,var(--bg-2) 30%,var(--bg-3) 50%,var(--bg-2) 70%);background-size:200% 100%;border:1px solid var(--bdr);border-radius:var(--r);animation:skel-shimmer 1.8s ease-in-out infinite} @keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .dash-err{color:var(--txt3);padding:var(--sp-10);text-align:center} .dash-card{ background:var(--bg-1);border:1px solid var(--bdr); border-radius:var(--r);padding:var(--sp-5); transition:all .3s var(--ease); display:flex;flex-direction:column;gap:var(--sp-3); position:relative;overflow:hidden; } .dash-card::before{display:none} .dash-card:hover{border-color:var(--bdr2);box-shadow:var(--sh-md);transform:translateY(-3px)} .dc-top{display:flex;align-items:center;gap:var(--sp-2)} .dc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .dc-done{background:var(--grn)}.dc-error{background:var(--red)}.dc-pending,.dc-running{background:var(--ylw)} .dc-title{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.02em} .dc-prompt{font-size:12.5px;color:var(--txt4);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .dc-meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--txt4)} .dc-meta-sep{color:var(--bdr2);font-size:4px} .dc-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-1)} .dc-open,.dc-del{font-family:var(--font);font-size:12px;font-weight:500;padding:6px 14px;border-radius:var(--rs);cursor:pointer;transition:all .2s var(--ease);border:1px solid var(--bdr)} .dc-open{color:var(--txt);background:var(--bg-3)}.dc-open:hover{background:var(--bg-4);border-color:var(--bdr2)} .dc-del{color:var(--txt4);background:transparent}.dc-del:hover{color:var(--red);border-color:rgba(248,113,113,.2);background:var(--red-s)} /* ═══════════════════════════════════════════ WORKSPACE ═══════════════════════════════════════════ */ .ws-body{display:grid;grid-template-columns:400px 4px 1fr;flex:1;min-height:0;overflow:hidden} /* Sidebar */ .sidebar{display:flex;flex-direction:column;background:var(--bg-1);overflow:hidden} .sb-tabs{display:flex;border-bottom:1px solid var(--bdr);flex-shrink:0} .sb-tab{flex:1;font-family:var(--font);font-size:11.5px;font-weight:600;color:var(--txt4);background:transparent;border:none;border-bottom:2px solid transparent;padding:11px 0;cursor:pointer;transition:all .2s var(--ease);text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;justify-content:center;gap:5px} .sb-tab svg{opacity:.4;transition:opacity .2s}.sb-tab.active svg{opacity:1} .sb-tab:hover{color:var(--txt3);background:rgba(255,255,255,.01)} .sb-tab.active{color:var(--txt);border-bottom-color:var(--accent)} .sb-panel{display:none;flex-direction:column;flex:1;min-height:0;overflow:hidden} .sb-panel.active{display:flex} /* Chat */ .chat-msgs{flex:1;overflow-y:auto;padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-3)} .chat-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;text-align:center;padding:var(--sp-5)} .chat-welcome-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--r);color:var(--txt4);margin-bottom:var(--sp-1)} .chat-welcome p{font-size:13px;color:var(--txt2);font-weight:500;letter-spacing:-.01em} .chat-welcome span{font-size:11.5px;color:var(--txt4);line-height:1.55;max-width:260px} .bubble{max-width:85%;border-radius:var(--r);padding:var(--sp-3) var(--sp-4);font-size:13px;line-height:1.6;word-break:break-word;animation:bubbleIn .25s var(--ease-out)} @keyframes bubbleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .bubble-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px;opacity:.45} .bubble-body{display:flex;flex-direction:column;gap:8px} .bubble-body p{margin:0} .bubble-body h2,.bubble-body h3{margin:4px 0 0;color:var(--txt);font-size:13px;line-height:1.35} .bubble-body ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px} .bubble-body li{padding-left:2px} .bubble-body code{background:rgba(255,255,255,.08);padding:1px 4px;border-radius:3px;font-size:11px} .bubble-body pre{background:rgba(255,255,255,.05);padding:8px 10px;border-radius:6px;font-size:11px;overflow-x:auto;margin:0} .bubble-body table{width:100%;border-collapse:collapse;font-size:11px;margin:2px 0} .bubble-body th,.bubble-body td{padding:4px 8px;border-bottom:1px solid var(--bdr);text-align:left} .bubble-body th{color:var(--txt);font-weight:600;border-bottom-color:var(--bdr2)} .b-user{align-self:flex-end;background:var(--acc-s);color:var(--accent2);border:1px solid var(--acc-border);border-bottom-right-radius:var(--rx);position:relative} .b-assistant{align-self:flex-start;background:var(--bg-3);color:var(--txt2);border:1px solid var(--bdr);border-bottom-left-radius:var(--rx)} .chat-intent-bar{display:flex;align-items:center;gap:6px;padding:6px var(--sp-3) 4px;animation:bubbleIn .2s var(--ease-out)} .intent-chip{flex:1;display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(99,102,241,.04));border:1px solid rgba(99,102,241,.28);border-radius:10px;color:var(--txt);font-size:12px;font-family:inherit;cursor:pointer;text-align:left;transition:background .15s,border-color .15s} .intent-chip:hover{background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(99,102,241,.08));border-color:rgba(99,102,241,.48)} .intent-chip svg{color:rgba(165,180,252,.95);flex-shrink:0} .intent-chip span:first-of-type{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .intent-chip-go{font-weight:700;color:rgba(165,180,252,1);font-size:11px;flex-shrink:0} .intent-dismiss{background:transparent;border:none;color:var(--txt3);font-size:13px;cursor:pointer;padding:4px 6px;border-radius:5px} .intent-dismiss:hover{color:var(--txt);background:rgba(255,255,255,.05)} .locale-ko .intent-chip{background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(37,99,235,.03));border-color:rgba(37,99,235,.25);color:var(--txt)} .locale-ko .intent-chip:hover{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(37,99,235,.05));border-color:rgba(37,99,235,.4)} .locale-ko .intent-chip svg,.locale-ko .intent-chip-go{color:#2563eb} .locale-ko .intent-dismiss:hover{background:rgba(15,23,42,.05);color:var(--txt)} .undo-row{align-self:flex-end;margin:-2px 2px 2px 0;animation:bubbleIn .25s var(--ease-out)} .undo-action{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;background:transparent;color:var(--txt3);border:none;border-radius:5px;font-size:11px;font-weight:500;cursor:pointer;transition:background .12s,color .12s;font-family:inherit;opacity:.55} .undo-action:hover{opacity:1;color:var(--txt);background:rgba(255,255,255,.04)} .undo-action svg{opacity:.85} .bubble.undo-loading,.redo-bar.undo-loading{opacity:.5;pointer-events:none} .redo-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 var(--sp-3) var(--sp-2);padding:8px 12px;background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(129,140,248,.06));border:1px solid rgba(129,140,248,.22);border-radius:10px;animation:bubbleIn .25s var(--ease-out)} .redo-bar-text{display:flex;align-items:center;gap:8px;color:var(--txt2);font-size:12px;min-width:0;flex:1} .redo-bar-text svg{color:rgba(165,180,252,.85);flex-shrink:0} .redo-bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .redo-bar-btn{flex-shrink:0;background:rgba(99,102,241,.85);color:#fff;border:none;border-radius:6px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s;font-family:inherit;letter-spacing:-.005em} .redo-bar-btn:hover{background:rgba(99,102,241,1)} .upload-preview{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--bdr);background:var(--bg-2)} .upload-files{display:flex;flex-wrap:wrap;gap:var(--sp-1)} .upload-chip{display:flex;align-items:center;gap:5px;padding:4px 8px 4px 6px;background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--rx);font-size:11px;color:var(--txt2);max-width:200px} .upload-chip-icon{width:20px;height:20px;border-radius:3px;object-fit:cover;flex-shrink:0} .upload-chip-icon-file{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:var(--bg-4);border-radius:3px;flex-shrink:0} .upload-chip-icon-file svg{width:12px;height:12px;color:var(--txt3)} .upload-chip-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0} .upload-chip-remove{background:none;border:none;color:var(--txt4);font-size:14px;cursor:pointer;padding:0 2px;line-height:1;flex-shrink:0} .upload-chip-remove:hover{color:var(--red)} .chat-input-wrap{display:flex;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--bdr);background:var(--bg-2);flex-shrink:0;align-items:flex-end} .chat-attach{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:transparent;border:1px solid var(--bdr);border-radius:var(--rs);color:var(--txt4);cursor:pointer;transition:all .2s var(--ease);flex-shrink:0} .chat-attach:hover{color:var(--accent2);border-color:var(--accent);background:var(--acc-s)} .chat-ta{flex:1;background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--rs);color:var(--txt);font-family:var(--font);font-size:13px;padding:8px 12px;resize:none;outline:none;min-height:34px;max-height:200px;overflow-y:auto;line-height:1.4;transition:border-color .2s} .chat-ta:focus{border-color:var(--accent)} .chat-ta::placeholder{color:var(--txt4)} .chat-send{width:34px;height:34px;background:var(--accent);border:none;border-radius:var(--rs);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s var(--ease);box-shadow:0 2px 8px rgba(139,92,246,.2)} .chat-send:hover{background:#7c3aed;box-shadow:0 4px 16px rgba(139,92,246,.3)} .drop-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);background:rgba(139,92,246,.06);border:2px dashed var(--accent);border-radius:var(--r);z-index:20;color:var(--accent2);font-size:14px;font-weight:600;pointer-events:none} /* Activity log */ .sb-hdr{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--bdr);flex-shrink:0} .sb-hdr-title{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.6px} .act-dot{width:6px;height:6px;border-radius:50%;background:var(--txt4);transition:all .3s} .act-dot.active{background:var(--grn);animation:pulse 1.5s infinite} .sb-hdr-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;color:var(--txt4);cursor:pointer;border-radius:var(--rx);transition:all .15s} .sb-hdr-btn:hover{color:var(--txt2);background:var(--bg-3)} .activity-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 12px;border-bottom:1px solid var(--bdr);background:var(--bg-1);flex-shrink:0} .activity-summary-card{padding:10px 12px;border:1px solid var(--bdr);border-radius:8px;background:var(--bg-2);display:flex;flex-direction:column;gap:4px;min-width:0} .activity-summary-card-wide{grid-column:1/-1} .activity-summary-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--txt4)} .activity-summary-card strong{font-size:12px;font-weight:600;color:var(--txt2);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .log-out{flex:1;overflow-y:auto;padding:var(--sp-2);background:var(--bg-0);font-family:var(--mono);font-size:11.5px;line-height:1.8} .log-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);height:100%;color:var(--txt4);font-family:var(--font);font-size:12px;text-align:center;padding:var(--sp-5)} .log-line{display:flex;align-items:baseline;gap:6px;padding:2px 6px;border-radius:var(--rx);transition:background .1s} .log-line:hover{background:rgba(255,255,255,.015)} .log-ts{flex-shrink:0;width:38px;text-align:right;color:var(--txt4);font-size:10px;opacity:.55} .lv-info{color:var(--blu)}.lv-success{color:var(--grn)}.lv-error{color:var(--red)}.lv-warning{color:var(--ylw)} .lv-tool{color:var(--txt2)}.lv-thinking{color:var(--txt4)}.lv-stderr{color:var(--ylw)}.lv-raw{color:var(--txt4)} /* Resize handle */ .resize-h{width:4px;cursor:col-resize;background:var(--bg-0);transition:background .2s;position:relative} .resize-h::after{content:'';position:absolute;inset:0;width:1px;left:50%;background:var(--bdr)} .resize-h:hover,.resize-h:active{background:var(--accent)} .resize-h:hover::after,.resize-h:active::after{display:none} /* Main content */ .ws-main{display:flex;flex-direction:column;background:var(--bg-0);overflow:hidden} /* Workspace tabs */ .ws-tabs{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 var(--sp-3);background:var(--bg-1);border-bottom:1px solid var(--bdr);flex-shrink:0} .ws-tab-group{display:flex;gap:1px} .ws-tab{display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:12.5px;font-weight:500;color:var(--txt4);background:transparent;border:none;border-bottom:2px solid transparent;height:42px;padding:0 var(--sp-3);cursor:pointer;transition:all .2s var(--ease);margin-bottom:-1px} .ws-tab:hover{color:var(--txt3)} .ws-tab.active{color:var(--txt);border-bottom-color:var(--accent)} .ws-tab svg{opacity:.35;transition:opacity .2s}.ws-tab:hover svg{opacity:.6}.ws-tab.active svg{opacity:1} .ws-tab-actions{display:flex;align-items:center;gap:var(--sp-1)} .resp-group{display:flex;background:var(--bg-2);border:1px solid var(--bdr);border-radius:var(--rs);overflow:hidden} .resp-btn{display:flex;align-items:center;justify-content:center;width:30px;height:26px;background:transparent;border:none;color:var(--txt4);cursor:pointer;transition:all .15s} .resp-btn:hover{color:var(--txt3)}.resp-btn.active{color:var(--accent2);background:var(--acc-s)} .act-btn{display:flex;align-items:center;justify-content:center;gap:5px;min-width:30px;height:28px;background:transparent;border:1px solid var(--bdr);border-radius:var(--rs);color:var(--txt4);cursor:pointer;transition:all .2s var(--ease);font-family:var(--font);font-size:11px;padding:0 var(--sp-2)} .act-btn:hover:not(:disabled){color:var(--txt2);background:var(--bg-3);border-color:var(--bdr2)} .act-btn:disabled{opacity:.25;cursor:not-allowed} .act-primary{background:var(--acc-s);border-color:var(--acc-border);color:var(--accent2);padding:0 12px} .act-primary:hover:not(:disabled){background:rgba(139,92,246,.18)} /* Tab panels */ .ws-panel{display:none;flex:1;min-height:0;overflow:hidden} .ws-panel.active{display:flex;flex-direction:column} /* Preview */ .preview-wrap{flex:1;position:relative;background:var(--bg-0);display:flex;align-items:center;justify-content:center;overflow:hidden} .preview-frame{width:100%;height:100%;border:none;background:#fff;transition:all .3s var(--ease)} .resp-desktop .preview-frame{max-width:none;border-radius:0} .resp-tablet .preview-frame{width:768px;max-width:768px;height:calc(100% - 32px);border-radius:var(--r);box-shadow:var(--sh-lg)} .resp-mobile .preview-frame{width:375px;max-width:375px;height:calc(100% - 32px);border-radius:var(--r);box-shadow:var(--sh-lg)} .preview-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5);background:var(--bg-0);z-index:5} .preview-overlay.hidden{display:none} .gen-anim{position:relative;width:68px;height:68px} .gen-ring{position:absolute;inset:0;border:2px solid var(--bdr);border-top-color:var(--accent);border-radius:50%;animation:spin 1.2s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .gen-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent2);animation:ipulse 2.5s ease-in-out infinite} @keyframes ipulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}} #gen-title{font-size:18px;font-weight:700;color:var(--txt);letter-spacing:-.03em} #gen-sub{font-size:13px;color:var(--txt3);margin-top:-var(--sp-2)} .gen-steps{display:flex;align-items:center;margin-top:var(--sp-2);gap:0} .gen-step{display:flex;align-items:center;gap:6px;padding:5px 12px;font-size:11px;font-weight:500;color:var(--txt4);transition:all .35s var(--ease)} .gen-step::after{content:'';display:block;width:20px;height:1px;background:var(--bdr);margin-left:6px} .gen-step:last-child::after{display:none} .step-dot{width:7px;height:7px;border-radius:50%;background:var(--bdr2);transition:all .35s var(--ease);flex-shrink:0} .gen-step.active{color:var(--accent2)}.gen-step.active .step-dot{background:var(--accent2);box-shadow:0 0 10px rgba(139,92,246,.25);animation:pulse 1.2s infinite} .gen-step.completed{color:var(--grn)}.gen-step.completed .step-dot{background:var(--grn)} .gen-mail-hint{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 14px;border-radius:999px;background:rgba(99,102,241,.08);color:#64748b;font-size:12.5px;font-weight:500} .gen-mail-hint svg{width:14px;height:14px;fill:none;stroke:#6366f1;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .gen-mail-hint strong{color:#0f172a;font-weight:700} .locale-ko .gen-mail-hint{background:#eff6ff;color:#475569} .locale-ko .gen-mail-hint strong{color:#1e293b} /* ═══ Auth / User Menu ═══ */ .user-menu{position:relative} .user-menu.hidden{display:none} .user-trigger{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:100px;cursor:pointer;transition:all .2s;font-family:var(--font);line-height:1} .user-trigger:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15)} .user-trigger svg:last-child{color:rgba(255,255,255,.3);transition:transform .2s} .user-menu.open .user-trigger svg:last-child{transform:rotate(180deg)} .user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0} .user-avatar-fallback{width:24px;height:24px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;line-height:1} .user-avatar-fallback.hidden{display:none} .user-name{font-size:12px;font-weight:500;color:rgba(255,255,255,.6);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-dropdown{position:fixed;top:auto;right:20px;width:220px;background:var(--bg-2);border:1px solid var(--bdr2);border-radius:var(--r);box-shadow:var(--sh-lg);z-index:9999;overflow:hidden;animation:modalIn .15s var(--ease)} .user-dropdown.hidden{display:none} .ud-header{padding:12px 14px} .ud-email{font-size:11px;color:var(--txt3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ud-divider{height:1px;background:var(--bdr);margin:0} .ud-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;font-family:var(--font);font-size:13px;font-weight:500;color:var(--txt2);background:none;border:none;cursor:pointer;transition:all .15s} .ud-item:hover{background:var(--bg-3);color:var(--txt)} .ud-item svg{color:var(--txt3);flex-shrink:0} .ud-logout{color:var(--red)}.ud-logout svg{color:var(--red)} .ud-logout:hover{background:var(--red-s)} .locale-ko .user-trigger{background:#fff;border-color:#d9dde6;color:#111827;box-shadow:0 1px 2px rgba(15,23,42,.04)} .locale-ko .user-trigger:hover{background:#f9fafb;border-color:#b8c0ce} .locale-ko .user-trigger svg:last-child{color:#64748b} .locale-ko .user-name{color:#111827;font-weight:700;max-width:110px;min-width:42px} .locale-ko .user-avatar-fallback{background:#e0ecff;color:#2563eb;border:1px solid #bfdbfe} .locale-ko .user-dropdown{background:#fff;border:1px solid #d8dee9;border-radius:10px;box-shadow:0 18px 46px rgba(15,23,42,.16);color:#111827} .locale-ko .ud-header{padding:13px 14px;background:#fbfcfe} .locale-ko .ud-email{color:#64748b} .locale-ko .ud-divider{background:#edf0f5} .locale-ko .ud-item{color:#334155;background:#fff} .locale-ko .ud-item:hover{background:#f3f6fb;color:#111827} .locale-ko .ud-item svg{color:#64748b} .locale-ko .ud-logout{color:#dc2626} .locale-ko .ud-logout svg{color:#dc2626} .locale-ko .ud-logout:hover{background:#fef2f2;color:#b91c1c} .locale-ko #ud-shortcuts{display:none} /* Login Modal */ .login-btns{display:flex;flex-direction:column;gap:8px} .login-btn{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:var(--rs);font-family:var(--font);font-size:13px;font-weight:500;text-decoration:none;transition:all .2s var(--ease);cursor:pointer;border:1px solid var(--bdr)} .login-google{background:var(--bg-3);color:var(--txt)}.login-google:hover{background:var(--bg-4);border-color:var(--bdr2)} .login-naver{background:#03C75A;color:#fff;border-color:#03C75A}.login-naver:hover{background:#02b351} .login-kakao{background:#FEE500;color:#3C1E1E;border-color:#FEE500}.login-kakao:hover{background:#fdd800} /* ═══ Email Notify ═══ */ .notify-bar{margin-top:var(--sp-4);width:100%;max-width:480px} .notify-inner{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:14px 20px;background:var(--bg-2);border:1px solid var(--bdr);border-radius:var(--rs)} .notify-label{font-size:12px;color:var(--txt3);font-weight:500} .notify-form{display:flex;gap:var(--sp-1);width:100%} .notify-input{flex:1;background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--rx);color:var(--txt);font-family:var(--font);font-size:12px;padding:7px 10px;outline:none;transition:border-color .2s} .notify-input:focus{border-color:var(--accent)} .notify-input::placeholder{color:var(--txt4)} .notify-btn{font-family:var(--font);font-size:12px;font-weight:600;color:#fff;background:var(--accent);border:none;border-radius:var(--rx);padding:7px 16px;cursor:pointer;transition:all .2s var(--ease);white-space:nowrap} .notify-btn:hover{background:#7c3aed} .notify-btn:disabled{opacity:.4;cursor:not-allowed} .notify-done{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--grn)} .notify-done.hidden{display:none} /* ═══ Wait Tabs ═══ */ .wait-tabs{display:flex;gap:2px;background:var(--bg-2);border:1px solid var(--bdr);border-radius:var(--rs);padding:2px;margin-top:var(--sp-4)} .wait-tab{display:flex;align-items:center;gap:5px;font-family:var(--font);font-size:11.5px;font-weight:500;color:var(--txt4);background:transparent;border:none;border-radius:var(--rx);padding:6px 14px;cursor:pointer;transition:all .2s var(--ease)} .wait-tab:hover{color:var(--txt3)} .wait-tab.active{color:var(--txt);background:var(--bg-3)} .wait-tab svg{opacity:.4}.wait-tab.active svg{opacity:1} .wait-panel{display:none;width:100%;max-width:520px;margin-top:var(--sp-3)} .wait-panel.active{display:flex;flex-direction:column;align-items:center} /* ═══ YouTube ═══ */ .yt-player-wrap{width:100%;max-width:480px;position:relative} .yt-controls{display:flex;width:100%;max-width:480px;margin-top:var(--sp-2)} .yt-controls.hidden{display:none} .yt-back-btn{display:flex;align-items:center;gap:5px;font-family:var(--font);font-size:12px;font-weight:500;color:var(--txt3);background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--rs);padding:7px 14px;cursor:pointer;transition:all .2s var(--ease)} .yt-back-btn:hover{color:var(--txt);background:var(--bg-4);border-color:var(--bdr2)} .yt-player{width:100%;aspect-ratio:16/9;border-radius:var(--rs);border:1px solid var(--bdr)} .yt-url-wrap{display:flex;gap:var(--sp-1);width:100%;max-width:480px;margin-top:var(--sp-2)} .yt-url-input{flex:1;background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--rs);color:var(--txt);font-family:var(--font);font-size:12px;padding:7px 12px;outline:none;transition:border-color .2s} .yt-url-input:focus{border-color:var(--accent)} .yt-url-input::placeholder{color:var(--txt4)} .yt-url-btn{width:34px;height:34px;background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--rs);color:var(--txt3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);flex-shrink:0} .yt-url-btn:hover{color:var(--accent2);border-color:var(--acc-border);background:var(--acc-s)} .yt-picks{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);width:100%;max-width:480px;margin-top:var(--sp-2)} .yt-pick{display:flex;flex-direction:column;gap:6px;background:var(--bg-2);border:1px solid var(--bdr);border-radius:var(--rs);cursor:pointer;transition:all .2s var(--ease);overflow:hidden} .yt-pick:hover{border-color:var(--bdr2);background:var(--bg-3);transform:translateY(-2px);box-shadow:var(--sh-sm)} .yt-pick-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg-3)} .yt-pick-info{padding:6px 10px 10px;display:flex;flex-direction:column;gap:2px} .yt-pick-title{font-size:11px;font-weight:500;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4} .yt-pick-channel{font-size:10px;color:var(--txt4)} /* ═══ Mini Game ═══ */ .mini-game{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)} .mini-game-start{font-family:var(--font);font-size:12px;font-weight:500;color:var(--txt3);background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--rs);padding:8px 18px;cursor:pointer;transition:all .2s var(--ease)} .mini-game-start:hover{color:var(--accent2);border-color:var(--acc-border);background:var(--acc-s)} .mini-game-start.hidden{display:none} #mini-game-canvas{border-radius:var(--rs);border:1px solid var(--bdr);background:var(--bg-1);display:none;cursor:pointer} #mini-game-canvas.active{display:block} .mini-game-score{font-family:var(--mono);font-size:11px;color:var(--txt3);min-height:16px} .fs-on{position:fixed!important;inset:0;z-index:1000} .fs-close{position:absolute;top:var(--sp-3);right:var(--sp-3);z-index:1001;display:flex;align-items:center;gap:6px;padding:8px 14px;font-family:var(--font);font-size:12px;font-weight:500;color:var(--txt);background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.12);border-radius:var(--rs);cursor:pointer;backdrop-filter:blur(12px);transition:all .2s var(--ease)} .fs-close:hover{background:rgba(0,0,0,.9)} .locale-ko .fs-close{color:#0f172a;background:rgba(255,255,255,.92);border:1px solid #d9dde6;box-shadow:0 4px 12px rgba(15,23,42,.10)} .locale-ko .fs-close:hover{background:#fff;border-color:#b8c0ce} /* ═══════════════════════════════════════════ CODE EDITOR ═══════════════════════════════════════════ */ .code-hdr{background:var(--bg-1);border-bottom:1px solid var(--bdr);overflow-x:auto;flex-shrink:0;display:flex} .file-tabs{display:flex;gap:0;padding:0 var(--sp-2)} .ftab{display:flex;align-items:center;gap:6px;padding:8px 14px;font-family:var(--font);font-size:12px;font-weight:500;color:var(--txt4);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .2s var(--ease);white-space:nowrap} .ftab:hover{color:var(--txt3);background:rgba(255,255,255,.02)} .ftab.active{color:var(--txt);background:var(--bg-2);border-bottom-color:var(--accent)} .ftab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .code-body{flex:1;overflow:hidden;background:var(--bg-0);display:flex} .code-editor-wrap{display:flex;flex:1;overflow:auto} .line-gutter{width:52px;min-width:52px;background:var(--bg-1);padding:4px 0;font-family:var(--mono);font-size:11px;line-height:20px;color:var(--txt4);text-align:right;user-select:none;-webkit-user-select:none;overflow:hidden;border-right:1px solid var(--bdr)} .line-gutter div{padding:0 12px 0 0;opacity:.4} .code-ta{flex:1;background:var(--bg-0);color:var(--txt);font-family:var(--mono);font-size:13px;line-height:20px;padding:4px var(--sp-4);border:none;outline:none;resize:none;tab-size:2;white-space:pre;overflow:auto;caret-color:var(--accent2)} .code-ta::placeholder{color:var(--txt4)} .code-foot{display:flex;align-items:center;justify-content:space-between;padding:6px var(--sp-3);background:var(--bg-1);border-top:1px solid var(--bdr);flex-shrink:0} .code-info{font-size:11px;font-family:var(--mono);color:var(--txt4)} .code-foot-right{display:flex;align-items:center;gap:var(--sp-2)} .unsaved{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--ylw)} .foot-btn{display:flex;align-items:center;gap:5px;font-family:var(--font);font-size:11px;font-weight:500;color:var(--txt3);background:var(--bg-2);border:1px solid var(--bdr);border-radius:var(--rs);padding:4px 10px;cursor:pointer;transition:all .2s var(--ease)} .foot-btn:hover{background:var(--bg-3);color:var(--txt);border-color:var(--bdr2)} .foot-btn:disabled{opacity:.25;cursor:not-allowed} .foot-btn.copied{color:var(--grn);border-color:rgba(52,211,153,.2)} /* ═══════════════════════════════════════════ QUICK EDIT — Change Review Banner ═══════════════════════════════════════════ */ .change-banner{position:absolute;bottom:0;left:0;right:0;background:var(--bg-1);border-top:1px solid var(--bdr2);z-index:60;max-height:45%;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s var(--ease-out)} @keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}} .cb-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);flex-shrink:0;border-bottom:1px solid var(--bdr)} .cb-title{display:flex;align-items:center;gap:var(--sp-2);font-size:13px;color:var(--txt);font-weight:500} .cb-title svg{color:var(--accent2)} .cb-actions{display:flex;gap:var(--sp-2)} .cb-btn{font-family:var(--font);font-size:12px;font-weight:600;padding:7px 14px;border-radius:var(--rs);cursor:pointer;transition:all .2s var(--ease);display:flex;align-items:center;gap:5px} .cb-discard{background:transparent;border:1px solid var(--bdr);color:var(--txt3)} .cb-discard:hover{color:var(--red);border-color:rgba(248,113,113,.2);background:var(--red-s)} .cb-send{background:var(--accent);border:none;color:#fff;box-shadow:0 2px 12px rgba(139,92,246,.25)} .cb-send:hover{background:#7c3aed;box-shadow:0 6px 20px rgba(139,92,246,.35)} .change-list{overflow-y:auto;padding:var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1)} .change-item{display:flex;align-items:center;gap:var(--sp-2);padding:7px 12px;background:var(--bg-2);border:1px solid var(--bdr);border-radius:var(--rs);font-size:12px;animation:fadeSlide .2s var(--ease-out)} @keyframes fadeSlide{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}} .ci-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:4px;flex-shrink:0} .ci-text{background:var(--grn-s);color:var(--grn)}.ci-style{background:var(--blu-s);color:var(--blu)}.ci-move{background:var(--ylw-s);color:var(--ylw)} .ci-desc{flex:1;color:var(--txt2);font-family:var(--mono);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ci-remove{background:none;border:none;color:var(--txt4);font-size:16px;cursor:pointer;padding:0 4px;line-height:1;flex-shrink:0;transition:color .15s} .ci-remove:hover{color:var(--red)} /* ═══════════════════════════════════════════ DESIGN MODE ═══════════════════════════════════════════ */ .design-mode-btn.active{color:var(--accent2);background:var(--acc-s);border-color:var(--acc-border)} .design-mode-btn span{font-weight:600} .prop-panel{position:absolute;top:var(--sp-3);right:var(--sp-3);width:256px;max-height:calc(100% - var(--sp-6));background:var(--bg-2);border:1px solid var(--bdr2);border-radius:var(--r);box-shadow:var(--sh-lg);z-index:50;display:flex;flex-direction:column;overflow:hidden;animation:modalIn .25s var(--ease)} .prop-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--bdr);flex-shrink:0} .prop-tag{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent2);background:var(--acc-s);padding:2px 8px;border-radius:4px} .prop-close{background:none;border:none;color:var(--txt4);font-size:18px;cursor:pointer;padding:4px;line-height:1;border-radius:var(--rx);transition:all .15s} .prop-close:hover{color:var(--txt);background:var(--bg-3)} .prop-body{flex:1;overflow-y:auto;padding:var(--sp-2) var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)} .prop-group{display:flex;flex-direction:column;gap:3px} .prop-label{font-size:9px;font-weight:700;color:var(--txt4);text-transform:uppercase;letter-spacing:.6px} .prop-input{background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--rx);color:var(--txt);font-family:var(--mono);font-size:11px;padding:6px 8px;outline:none;width:100%;transition:border-color .15s} .prop-input:focus{border-color:var(--accent)} .prop-textarea{resize:vertical;min-height:32px;max-height:70px;font-family:var(--font);font-size:12px} .prop-input-sm{flex:1} .prop-color-row{display:flex;align-items:center;gap:6px} .prop-color{width:28px;height:28px;border:1px solid var(--bdr2);border-radius:var(--rx);cursor:pointer;padding:0;background:none;flex-shrink:0} .prop-select{background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--rx);color:var(--txt);font-size:11px;padding:6px 8px;outline:none;width:100%} .prop-footer{display:flex;gap:6px;padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--bdr);flex-shrink:0} .prop-btn{flex:1;font-family:var(--font);font-size:10px;font-weight:600;padding:7px 12px;border-radius:var(--rx);cursor:pointer;transition:all .2s var(--ease);border:1px solid var(--bdr)} .prop-btn-sec{background:var(--bg-3);color:var(--txt3)}.prop-btn-sec:hover{background:var(--bg-4);color:var(--txt)} .prop-btn-pri{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(139,92,246,.2)}.prop-btn-pri:hover{background:#7c3aed} /* ═══════════════════════════════════════════ DESIGN SYSTEM PANEL ═══════════════════════════════════════════ */ .ds-body{flex:1;overflow-y:auto;padding:0} .ds-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);height:200px;color:var(--txt4);font-size:12px;text-align:center;padding:var(--sp-5)} .ds-sections{padding:var(--sp-2) 0} .ds-section{padding:0 var(--sp-3);margin-bottom:var(--sp-3)} .ds-section-title{font-size:9px;font-weight:700;color:var(--txt4);text-transform:uppercase;letter-spacing:.8px;padding:6px 0;border-bottom:1px solid var(--bdr);margin-bottom:var(--sp-2)} .ds-items{display:flex;flex-direction:column;gap:var(--sp-1)} .ds-item{display:flex;align-items:center;gap:6px;padding:3px 0} .ds-item-name{font-family:var(--mono);font-size:10px;color:var(--txt3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ds-item-input{background:var(--bg-3);border:1px solid var(--bdr);border-radius:var(--rx);color:var(--txt);font-family:var(--mono);font-size:10px;padding:4px 6px;outline:none;width:82px;transition:border-color .15s} .ds-item-input:focus{border-color:var(--accent)} .ds-item-color{width:22px;height:22px;border:1px solid var(--bdr2);border-radius:var(--rx);cursor:pointer;padding:0;flex-shrink:0} .ds-save-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - var(--sp-6));margin:var(--sp-2) var(--sp-3);padding:8px;font-family:var(--font);font-size:11px;font-weight:600;color:var(--accent2);background:var(--acc-s);border:1px solid var(--acc-border);border-radius:var(--rs);cursor:pointer;transition:all .2s var(--ease)} .ds-save-btn:hover:not(:disabled){background:rgba(139,92,246,.18)} .ds-save-btn:disabled{opacity:.35;cursor:not-allowed} /* ═══════════════════════════════════════════ COMPONENT LIBRARY ═══════════════════════════════════════════ */ .comp-grid{display:flex;flex-direction:column;gap:var(--sp-1)} .comp-card{display:flex;align-items:center;gap:var(--sp-2);padding:8px 10px;background:var(--bg-2);border:1px solid var(--bdr);border-radius:var(--rs);cursor:pointer;transition:all .2s var(--ease);text-align:left;font-family:var(--font);width:100%} .comp-card:hover{background:var(--bg-3);border-color:var(--bdr2);transform:translateX(3px)} .comp-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--acc-s);border:1px solid var(--acc-border);border-radius:var(--rs);color:var(--accent2);flex-shrink:0;transition:all .2s} .comp-card:hover .comp-icon{background:rgba(139,92,246,.18)} .comp-info{display:flex;flex-direction:column;gap:1px;min-width:0} .comp-info strong{font-size:11.5px;font-weight:600;color:var(--txt)} .comp-info span{font-size:9.5px;color:var(--txt4)} /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media(max-width:1024px){ .tpl-grid{max-width:none;margin:0 auto} } @media(max-width:768px){ .hide-d{display:flex!important} .hide-m{display:none!important} .land-nav{padding:var(--sp-3) var(--sp-4)} .brand span{display:none} .hero-h1{font-size:clamp(32px,10vw,46px);letter-spacing:-.04em} .hero-p{font-size:15px} .tpl-grid{gap:6px} .tpl-pill{font-size:12px;padding:6px 14px} .prompt-go span{display:none} .prompt-go{padding:11px 16px} .land-foot{margin:0 16px;padding-right:132px} .land-nav{padding:14px 20px} .brand-word{display:none} /* Mobile UX: chat is the primary surface (user generates/edits via prompts), preview is secondary. Default to chat fullscreen; preview slides up as a bottom sheet when `.preview-mobile-open` is added to the main pane. */ .ws-body{grid-template-columns:1fr!important;grid-template-rows:1fr} .resize-h{display:none} .sidebar{display:flex;position:static;height:auto;border:none;box-shadow:none;border-radius:0} .ws-main{display:none} .ws-main.preview-mobile-open{display:flex;position:fixed;bottom:0;left:0;right:0;height:60vh;z-index:100;border-top:1px solid var(--bdr2);box-shadow:0 -12px 48px rgba(0,0,0,.35);border-radius:12px 12px 0 0} .tb-title{max-width:140px;font-size:11px} .brand-sm span{display:none} .resp-group{display:none} .design-mode-btn{display:none!important} .prop-panel{display:none!important} .act-primary span{display:none} .act-primary{padding:0 var(--sp-2);min-width:30px} .dash-body{padding:var(--sp-4)} .dash-grid{grid-template-columns:1fr} .admin-metrics-head{align-items:flex-start;flex-direction:column} .admin-metrics-controls{width:100%} .admin-metrics-select{flex:1} .admin-head-strip{grid-template-columns:repeat(2,minmax(0,1fr));width:100%} .admin-metrics-overview{grid-template-columns:1fr} .admin-overview-pulse{grid-template-columns:1fr 1fr} .admin-overview-health{grid-template-columns:1fr 1fr} .admin-metrics-events-head{align-items:flex-start;flex-direction:column} .admin-metrics-events-tools{width:100%} .admin-metrics-search{min-width:0;flex:1} .admin-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .admin-metrics-charts{grid-template-columns:1fr} .admin-metrics-lower{grid-template-columns:1fr} .admin-events-summary{grid-template-columns:repeat(2,minmax(0,1fr))} .admin-metric-event{grid-template-columns:1fr;gap:10px} .admin-metric-event-actions{justify-content:flex-start} .admin-metric-event-time{text-align:left} } @media(max-width:480px){ .tpl-grid{max-width:none} .tpl-i{display:none} .tpl-card{padding:var(--sp-2) var(--sp-3)} .admin-overview-window{font-size:30px} .admin-head-strip{grid-template-columns:1fr} .admin-overview-pulse{grid-template-columns:1fr} .admin-overview-health{grid-template-columns:1fr} .admin-events-summary{grid-template-columns:1fr} .admin-metrics-grid{grid-template-columns:1fr} .admin-metrics-empty{min-height:200px} .activity-summary{grid-template-columns:1fr} } @media(max-width:560px){ .locale-ko .land-nav{padding:14px 16px} .locale-ko .land-hero{width:calc(100% - 28px);padding:22px 0} .locale-ko .hero-h1{font-size:34px} .locale-ko .hero-p{font-size:14px;line-height:1.65} .locale-ko .tpl-grid{grid-template-columns:1fr} .locale-ko .ko-studio-panel{padding:18px} .locale-ko .ko-guide-card{gap:14px} .ko-mascot{width:86px;height:86px} .ko-mascot-face{left:18px;right:18px;top:30px;height:32px} .ko-speech{padding:11px 12px} .ko-speech strong{font-size:13px} .ko-speech span{font-size:11px} .locale-ko .land-foot{justify-content:flex-start;margin:0;padding:12px 108px 12px 16px} .locale-ko .land-foot-text{white-space:normal;text-align:left;line-height:1.5} .locale-ko .lang-switcher{right:0} } @media(max-width:720px){ .locale-ko .land-hero{width:calc(100% - 28px);padding:34px 0 56px} .locale-ko .hero-h1{font-size:30px} .locale-ko .hero-p{font-size:15px;margin-bottom:26px} .locale-ko .ko-studio-panel{ position:relative; top:auto; right:auto; width:100%; min-height:104px; margin:0 0 16px; justify-content:flex-end; } .locale-ko .ko-mascot{width:92px;height:92px} .locale-ko .ko-mascot-face{left:18px;right:18px;top:31px;height:34px} .locale-ko .ko-speech{ display:none; } .locale-ko .prompt-card{padding-top:54px} .locale-ko .prompt-card::before{left:20px;top:24px;font-size:14px} .locale-ko .land-view .prompt-ta{margin:0 20px;width:calc(100% - 40px);min-height:110px} .locale-ko .prompt-actions{padding:18px 20px 22px} .locale-ko .prompt-go span{display:inline} .locale-ko .tpl-grid{grid-template-columns:1fr} .locale-ko .ko-recent-list .ko-recent-row{padding:0 16px} .locale-ko .land-foot{padding:12px 108px 12px 16px} } /* ═══════════════════════════════════════════ RESPONSIVE — unified breakpoints Mobile: <768 / Tablet: 768-1024 / Desktop: ≥1024 This block comes LAST so it wins on conflicts with earlier rules. ═══════════════════════════════════════════ */ /* Hamburger is hidden on desktop; shown only on mobile in KO mode. */ .ko-nav-hamburger{display:none;background:transparent;border:none;cursor:pointer;padding:6px;margin-right:4px;border-radius:8px;color:#0f172a} .ko-nav-hamburger:hover{background:#f1f5f9} .ko-nav-hamburger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .ko-nav-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:11;animation:koFadeIn .15s ease} .ko-nav-backdrop.show{display:block} @keyframes koFadeIn{from{opacity:0}to{opacity:1}} /* ── Tablet & below (≤1024px): sidebar collapses to drawer pattern ── */ @media (max-width:1024px){ /* Sidebar drawer behavior */ .locale-ko .land-nav{ position:fixed; inset:0 auto 0 0; width:280px; height:100vh; padding:24px 22px; border-right:1px solid #e5e9f1; border-bottom:none; background:#fff; flex-direction:column; align-items:stretch; transform:translateX(-100%); transition:transform .22s ease; z-index:12; } .locale-ko .land-nav.open{transform:translateX(0);box-shadow:0 12px 48px rgba(15,23,42,.18)} /* When drawer is open, drop the top-actions group BELOW the backdrop so every button (upgrade with its white bg, bell, avatar) dims uniformly. */ .locale-ko .land-nav.open ~ .ko-top-actions{z-index:10} .locale-ko .ko-side-menu, .locale-ko .ko-side-user{display:flex} /* Backdrop only when drawer open */ .locale-ko .ko-nav-backdrop{z-index:11} /* Page content shifts back to fill the area the sidebar used to occupy */ .locale-ko .land-bg{left:0} .locale-ko .land-foot{margin-left:0} /* Hero collapses from 2-column grid to single-column stack — at tablet widths the 310+560+gap grid no longer fits cleanly. */ .locale-ko .land-hero{ display:flex; flex-direction:column; align-items:stretch; gap:8px; width:min(860px,calc(100% - 40px)); margin:0 auto; padding:72px 0 32px; } .locale-ko .land-hero::before, .locale-ko .prompt-card::after{display:none} /* Reset grid-only properties so flex-column doesn't inherit them as cross-axis alignment (e.g. align-self:end → "stick to right" in flex). */ .locale-ko .land-hero > *{align-self:stretch} .locale-ko .hero-h1, .locale-ko .hero-p{text-align:left;max-width:none} /* Mascot centered horizontally with a gentle bounce. Tightened size so it doesn't push the prompt card far below the title. */ .locale-ko .ko-guide-card{justify-content:center;gap:0} /* Negative top/bottom margins absorb the transparent padding baked into the mascot PNG (~40px on each side), tightening the visual gap without resizing the image. */ .locale-ko .ko-mascot{margin:-36px 0;animation:koMascotBounce 2.4s ease-in-out infinite} .locale-ko .ko-studio-panel{max-width:none;width:100%;min-height:0;margin:0;padding:0;position:static} .locale-ko .prompt-card{min-height:0} .locale-ko .land-view .prompt-ta{min-height:132px} .locale-ko .tpl-section{max-width:none;width:100%} /* Top actions reposition to right side */ .locale-ko .ko-top-actions{top:20px;right:20px;width:auto} /* Hamburger visible — top-left of viewport, fixed above content */ .ko-nav-hamburger{ display:inline-flex; align-items:center; justify-content:center; position:fixed; top:18px; left:18px; z-index:13; background:#fff; border:1px solid #e5e9f1; box-shadow:0 4px 12px rgba(15,23,42,.06); width:42px; height:42px; } /* Templates grid 2 columns on tablet */ .locale-ko .tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Topbar action labels (e.g. Download) hidden at tablet+mobile — icon only. Also tighten the button padding so it matches the icon-only buttons. */ .hide-m{display:none!important} .act-primary{padding:0 var(--sp-2);min-width:30px} } /* Desktop intermediate: 1024-1280px viewport — 3 cols so titles like "SaaS 대시보드 · Pulse" have room without wrapping awkwardly. */ @media (min-width:1024px) and (max-width:1280px){ .locale-ko .tpl-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } /* ── Mobile (≤768px): tighter spacing, single column ── */ @media (max-width:768px){ /* Sidebar drawer becomes wider relative to screen */ .locale-ko .land-nav{width:min(86vw,320px)} /* Hero stacks tightly */ .locale-ko .land-hero{ margin-left:0; margin-right:0; padding:80px 16px 32px; width:100%; max-width:none; display:block; } .locale-ko .hero-h1{font-size:clamp(28px,7vw,38px);line-height:1.15;text-align:left} .locale-ko .hero-p{font-size:14px;text-align:left} /* Show mascot on mobile — smaller, centered, with negative margins to absorb the PNG's transparent padding. Speech bubble stays hidden. */ .locale-ko .ko-studio-panel{display:block;width:100%;min-height:0;margin:0;padding:0;position:static} .locale-ko .ko-guide-card{justify-content:center;gap:0} .locale-ko .ko-mascot{width:160px;height:160px;margin:-28px 0;animation:koMascotBounce 2.4s ease-in-out infinite} .locale-ko .ko-speech{display:none} /* Prompt card — label and padding aligned so they don't overlap */ .locale-ko .prompt-card{padding-top:54px;min-height:0;margin:0 0 24px} .locale-ko .prompt-card::before{left:18px;top:18px;font-size:14px} .locale-ko .land-view .prompt-ta{margin:0 14px;width:calc(100% - 28px);min-height:120px;font-size:14.5px;padding:10px 14px 8px} .locale-ko .prompt-actions{padding:12px 14px 16px} /* Templates 1 column */ .locale-ko .tpl-grid{grid-template-columns:1fr;gap:10px} /* Recent list more compact */ .locale-ko .ko-recent-list .ko-recent-row{padding:0 14px;min-height:58px;gap:10px} .locale-ko .ko-recent-list .ko-recent-row b{font-size:13px} /* Top actions on mobile — keep avatar+notif visible, hide upgrade label */ .locale-ko .ko-top-actions{top:14px;right:14px;gap:6px} .locale-ko .ko-upgrade{padding:0 10px;height:36px;font-size:12px} .locale-ko .ko-upgrade span{display:none} .locale-ko .ko-round-btn,.locale-ko .ko-avatar{width:38px;height:38px} /* Cap container width so it doesn't push hamburger area on small screens */ .locale-ko .ko-top-actions{width:auto;max-width:calc(100vw - 80px)} /* Footer wraps; lang switcher floats to the right edge of its row. */ .locale-ko .land-foot{padding:12px 16px;flex-wrap:wrap;font-size:11px} .locale-ko .lang-switcher{position:relative;right:auto;top:auto;margin-left:auto;transform:none} /* Workspace mobile: single-column tab switcher already exists via .sb-tab. Make sidebar full-height + topbar more compact. */ .ws-body{grid-template-columns:1fr!important} .topbar{padding:0 14px;height:54px} .ws-title{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Dashboard — 1 column cards, card action buttons right-aligned */ .locale-ko #v-dashboard .dash-grid{grid-template-columns:1fr;gap:12px} .locale-ko #v-dashboard .dash-body{padding:16px} .locale-ko #v-dashboard .dc-actions{justify-content:flex-end} /* Panes fill viewport (templates wide + settings/upgrade modal) */ .ko-pane{padding:0;align-items:stretch} .ko-pane .ko-pane-inner{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0} .ko-tpl-grid{grid-template-columns:1fr!important} /* Notification popover fills viewport width */ .ko-notif-pop{left:8px!important;right:8px;width:auto!important;max-width:none} /* Login / kb / generic overlay modals — compact on mobile */ .modal,.user-menu-dropdown{max-width:calc(100vw - 32px)} /* Toasts narrower so they don't span the whole screen */ .toast{max-width:calc(100vw - 32px)} } /* ── Workspace tablet adjustment (768-1024): chat panel narrower ── */ @media (min-width:768px) and (max-width:1024px){ /* Hide the resize handle (3rd grid item) so 2-column template is honored. */ .ws-body{grid-template-columns:280px 1fr} .ws-body .resize-h{display:none} }