2 lines
26 KiB
CSS
2 lines
26 KiB
CSS
|
:root{--color-bg: #0f1216;--color-surface: #161a21;--color-surface-2: #1c212b;--color-surface-3: #232a36;--color-border: #262d39;--color-border-strong: #364154;--color-text: #e6ecf3;--color-text-muted: #8c98ab;--color-text-strong: #ffffff;--color-accent: #7aa2ff;--color-accent-hover: #8eb3ff;--color-accent-soft: rgba(122, 162, 255, .12);--color-success: #4ade80;--color-warn: #facc15;--color-danger: #f87171;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);--shadow-md: 0 6px 24px rgba(0, 0, 0, .45);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Pretendard", system-ui, sans-serif;--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--sidebar-width: 280px;--inspector-width: 320px;--topbar-height: 52px}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}a{color:var(--color-accent);text-decoration:none}a:hover{text-decoration:underline}.muted{color:var(--color-text-muted)}#app{min-height:100vh;display:flex;flex-direction:column}.topbar{height:var(--topbar-height);flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:10}.topbar-brand h1{font-size:14px;font-weight:600;margin:0;letter-spacing:.2px;color:var(--color-text-strong)}.topbar-brand p{font-size:11px;margin:2px 0 0;color:var(--color-text-muted)}.topbar-actions{display:flex;align-items:center;gap:12px}.lang-toggle{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface-2)}.lang-btn{border:0;background:transparent;padding:5px 10px;cursor:pointer;color:var(--color-text-muted);font-size:11px;letter-spacing:.3px;min-width:32px}.lang-btn:hover{color:var(--color-text)}.lang-btn.active{background:var(--color-accent-soft);color:var(--color-accent)}.icon-button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);cursor:pointer;color:var(--color-text-muted)}.icon-button:hover{color:var(--color-text);border-color:var(--color-border-strong)}.layout{flex:1 1 auto;display:grid;grid-template-columns:var(--sidebar-width) 1fr var(--inspector-width);min-height:0}.sidebar,.workspace,.inspector{min-width:0;min-height:0;overflow:auto}.sidebar{background:var(--color-surface);border-right:1px solid var(--color-border);padding:14px}.workspace{padding:14px 18px}.inspector{background:var(--color-surface);border-left:1px solid var(--color-border);padding:14px}#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%) translateY(20px);background:var(--color-surface-3);color:var(--color-text);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:8px 14px;font-size:12px;opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none;box-shadow:var(--shadow-md);z-index:100}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:1280px){.layout{grid-template-columns:var(--sidebar-width) 1fr}.inspector{display:none}}@media(max-width:960px){.layout{grid-template-columns:1fr}.sidebar{display:none}}.sidebar .panel{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:12px;margin-bottom:12px}.sidebar .panel-head h2{margin:0 0 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted)}.sidebar label{display:block;font-size:11px;color:var(--color-text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}.sidebar label>span:first-child{display:block;margin-bottom:4px}.sidebar input,.sidebar select{width:100%;p
|