@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
body { font-family: 'Noto Sans KR', sans-serif; background-color: #1e1e2e; color: #cdd6f4; }
.panel { background-color: #313244; border-radius: 0.5rem; padding: 1.5rem; }
.input-base { background-color: #181825; border: 1px solid #45475a; color: #cdd6f4; border-radius: 0.375rem; padding: 0.5rem; width: 100%; transition: border-color 0.2s; }
.input-base:focus { outline: none; border-color: #89b4fa; }
.label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; color: #bac2de; }
.btn { padding: 0.5rem 1rem; border-radius: 0.375rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: center; }
.btn-primary { background-color: #89b4fa; color: #11111b; }
.btn-primary:hover { background-color: #74c7ec; }
.btn-secondary { background-color: #45475a; color: #cdd6f4; }
.btn-secondary:hover { background-color: #585b70; }
.btn-danger { background-color: #f38ba8; color: #11111b; }
.btn-danger:hover { background-color: #eba0ac; }

/* 커스텀 스크롤바 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1e1e2e; }
::-webkit-scrollbar-thumb { background: #45475a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #585b70; }

canvas { background-image: linear-gradient(45deg, #313244 25%, transparent 25%), linear-gradient(-45deg, #313244 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #313244 75%), linear-gradient(-45deg, transparent 75%, #313244 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }