/* 카드 스타일 - 입체감 추가 */ .card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; border-radius: 12px !important; border: none !important; } .card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; transition: box-shadow 0.3s ease; } /* 탭 스타일 - 둥근 모서리 */ .tab { border-radius: 8px 8px 0 0 !important; } .tabs-container { border-radius: 8px !important; } /* 첫 진입 시 스치는 'Loading...' 숨기기 ───────────────────────────────────────────────── Dash 는 React 가 붙기 전까지 #react-entry-point 안에
Loading...
를 그려 둔다. 로그인 화면이 뜨기 직전 이 글자가 한 번 스쳐 지나가는데, 브랜드도 아니고 사용자가 할 일도 없는 문구다. 글자만 지우면 그동안 흰 화면이 보이므로, 자리표시자 영역을 로그인 화면과 같은 색으로 깔아 둔다 — 흰 화면에서 회색으로 튀지 않는다. assets 의 CSS 는 에서 먼저 읽히므로 첫 페인트부터 적용된다. */ #react-entry-point { min-height: 100vh; background: var(--gray-50, #f8f9fa); } ._dash-loading { display: none; } /* 커스텀 로딩 스피너 - 피자 이미지 (차트 카드 로컬 오버레이) */ /* 기본 Dash 스피너 숨기기 */ .dash-spinner, ._dash-loading-callback .dash-default-spinner, ._dash-loading-callback > div[data-dash-is-loading="true"] { opacity: 0 !important; width: 0 !important; height: 0 !important; } /* 로딩 컨테이너: 오버레이가 이 안에서만 렌더링되도록 */ ._dash-loading-callback { position: relative !important; overflow: hidden !important; } /* 로딩 오버레이 배경 — 차트 카드 영역에만 적용 */ ._dash-loading-callback::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); z-index: 10; display: block; } /* 회전하는 피자 이미지 — 차트 중앙 */ ._dash-loading-callback::after { content: ''; position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin-top: -36px; margin-left: -36px; background-image: url('/assets/img/loading-pizza.png'); background-size: contain; background-repeat: no-repeat; background-position: center; animation: spin 1.2s linear infinite; z-index: 11; display: block; } /* 회전 애니메이션 */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Dev Tools 하단 메뉴 숨기기 (errors, callbacks, v3.3.0 등) */ ._dash-debug-menu, #_dash-debug-menu, .dash-debug-menu, [class*="debug-menu"], [id*="debug-menu"], ._dash-debug-alert-container, #_dash-debug-alert-container, [class*="dash-debug"], [id*="dash-debug"], .dash-error-menu, ._dash-error-menu, #react-entry-point > div:last-child[style*="position: fixed"], div[style*="bottom: 0"][style*="position: fixed"][style*="z-index"] { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } /* ============================================ */ /* 차트 애니메이션 효과 */ /* ============================================ */ /* Fade-in + Slide-up 애니메이션 */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* 애니메이션 기본 클래스 */ .animate-card { animation: fadeInUp 0.6s ease-out forwards; opacity: 0; } /* 순차적 애니메이션을 위한 딜레이 클래스 */ .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } .animate-delay-6 { animation-delay: 0.6s; } .animate-delay-7 { animation-delay: 0.7s; } .animate-delay-8 { animation-delay: 0.8s; }